MUIのスタイリング方法

MUI v5

• スタイリングは Emotion or styled components を利用できる

CSS-in-JSライブラリ

• JSS (JavaScript Style Sheets)

  • MUI v4 では makeStyles と JSS を組み合わせてスタイリング
    • MUI v5 で makeStyles が非推奨になった

• styled components

  • CSS-in-JS（JavaScript内でCSSを記述すること）のためのライブラリ
  • JavaScriptのテンプレートリテラルを使用してスタイルを定義できる
  • MUI v5 で利用可能

• Emotion

  • CSS-in-JS（JavaScript内でCSSを記述すること）のためのライブラリ
  • JavaScriptのオブジェクトやCSS構文を使用してスタイルを定義できる
  • MUI v5 で利用可能

MUI v5 でのスタイリング方法

• (MUIの) sx prop

  • https://mui.com/system/getting-started/the-sx-prop/
  • スタイルの指定方法
    • オブジェクトとしてスタイルを指定

• (MUIの) css prop

  • 以下のいずれかで生成したスタイルオブジェクトを渡すことが可能
    • MUIのデフォルトのスタイリングエンジン(@mui/styled-engine)
      • https://mui.com/system/styled/
        • 内部で Emotion を使用
    • Emotiom(@emotion/react)
      • https://emotion.sh/docs/css-prop#string-styles
      • スタイルの指定方法
        • 文字列としてCSSを指定
    • styled-components(@mui/styled-engine-sc)

• sx prop vs css prop

  • スタイルを別ファイルに分ける必要が無いような軽微なスタイリングは sx prop を使用すると良さそう