UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】新しくなったMUI

Material UIが新しくなってv5になったという話を聞いたので調べてみた

mui.com

こちらの記事が参考になった   zenn.dev

普段は使ってないので詳しく調べてなかったのだが、そもそも勘違いしていたのはMaterial UIはGoogleMaterial Designを元に React 実装されたもので、Googleは関係ないということだった

実はそういう認識間違いをしている人は私だけでは無かったらしく、ちょうどv5からブランド名がMaterial UIからMUIに変わったとのこと

https://zenn.dev/h_yoshikawa0724/articles/2021-09-26-material-ui-v5#%E6%96%B0%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89

それに伴い、ロゴやパッケージ名もv5から変更されている

スタイリングソリューションについて

CSS-in-JS にJSSを使っていたがそれをやめて、emotionStyled-components の好きな方を選べるようになったみたい

普段はStyled-componentsを使っているので助かる

ただ、親和性やパフォーマンスの面ではemotionの方が良さそう

sx props

sx propsと呼ばれるTailwindのようなユーティリティもあるみたい

The sx prop - MUI

<Button sx={{ my: 1 }}>Test</Button>

インラインスタイルユーティリティで気になるレスポンシブデザインの場合の対応もされているので安心できる

https://mui.com/system/basics/#responsive-values