Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
MUI v5 以降のカスタムスタイル設定
MUI v5 以降でコンポーネントにカスタムスタイル (CSS) を割り当てる方法には、大きく下記の 2 つのやり方があります。
sx prop を使う方法
MUI のコンポーネントには sx prop が定義されていて、ここにスタイルオブジェクトを渡すことで、個別にスタイルを調整できます。つまり、使い捨てのスタイル設定を行う方法です。sx prop は HTML 要素本来の style プロパティと比べて簡潔な構文で記述できます。例えば、margin や padding の設定用に 1 文字 (m, p) のプロパティ名が定義されていたりします。
styled API を使う方法
既存のコンポーネントをラップする形で、スタイル拡張したコンポーネントを生成します。sx prop を使った方法に比べて再利用性が高い方法で、複数個所で使用するコンポーネントにスタイル設定したいときに便利です。styled() 関数は内部的には Emotion というライブラリが提供する関数につながっていますが、MUI では @mui/material/styles パッケージをインポートすることで使えるようになっています。
いずれの方法でも、テーマ設定（theme オブジェクト）に基づいたカスタマイズが可能で、この仕組みにより、アプリ全体のデザインに一貫性を持たせやすくなっています
