muiのsx propと styledについて調べてみた

調べた結果

• 共通したコンポーネントを作成するときには、styled()を利用してstyleも共通化する。しかし、1度しか使用しなければsx propも利用しても良さそう。

sx prop

書き方

// JSX
<Button
  sx={{
    color: 'primary.main', // theme.palette.primary.main
    borderRadius: 1,
    p: 1, // padding: theme.spacing(1)
    m: {
      xs: 1, // [theme.breakpoints.up('xs')]: { margin: theme.spacing(1) }
    },
    minWidth: 300,
  }}
>
 クリック
</Button>

colorやpのプロパティは省略して書かれている。

特徴

• Theme対応のcssプロパティを省略して書くことができる。
  • 対応しているプロパティ
• 特定のHTML要素に対してcssを当てることができる

The sx prop is best suited for applying one-off styles to custom components.
// 1度限りのstyleを当てる際にsx propは最適

The sx prop, on the other hand, is a new way of styling your components, focused on fast customization.
// 時間をかけずにスタイルを当てる新しい方

Pros

• styledコンポーネントに比べて、学習コストが少ない
  • 最低限のMUIのstyleの当て方を学習すれば良い
• コードの記述が少なくて済む
• 疑似セレクタ、メディアクエリ、入れ子セレクタを記述できる
  • https://maku.blog/p/87p5o2d/

Cons

• コンポーネントのレンダリング時間が長くなる
  • https://mui.com/system/getting-started/usage/#performance-tradeoffs
  • https://github.com/mui/material-ui/tree/master/benchmark/browser/scenarios

styled()

書き方

const Button = styled(Button)(({ theme }) => ({
  color: theme.palette.primary.main
  borderRadius: theme.shape.borderRadius,
  padding: theme.spacing(1)
  [theme.breakpoints.up('xs')]: {
    margin: theme.spacing(1)
  },
  minWidth: 300,
}));

特徴

@mui/systemをimportして利用する。また、@mui/materialを使っていれば、@mui/material/stylesでも利用可能です。(それぞれの型をみてみると、使われているデフォルトのThemeが違う)

Pros

• 複数のコンポーネントに共通したstyleを提供できる
• スタイルのみのコンポーネントとして分けて置ける

Cons

• 学習コストがかかる
• スタイルのみのコンポーネントの存在に気づきにくい

MUIのスタイルをあててパフォーマンス比較をされている方もいたので、そちらを参考にするとさらに理解が深まると思います。