MUI実践ガイド — Reactコンポーネントライブラリを使いこなす

ReactのUIコンポーネントライブラリMUI（Material UI）の立ち位置を、Material Designとの関係とTailwind CSSとの違いから整理します。無料と有料の境目、v9で書き方が変わった点まで扱います。

Next.jsのApp RouterにMUIを導入する手順を、AppRouterCacheProviderが必要な理由と「use clientをどこに書くのか」の判断基準まで含めて解説します。

MUIのスタイリングの基本単位であるsx propを、数値の意味・テーマ参照・レスポンシブ記法まで整理します。v9で廃止されたsystem propsとの違いも扱います。

MUIで画面を組むときの4つのレイアウトコンポーネントを、それぞれの役割と選び方から整理します。v9で書き方が大きく変わったGridのsize propも扱います。

Typographyコンポーネントのvariantとcomponentの役割の違い、variantごとに描画されるHTMLタグ、noWrapやgutterBottomの挙動を整理します。v9で削除されたparagraph propも扱います。

ThemeProviderが無くても既定テーマで動く前提から、palette・typography・spacing・shapeの役割、createThemeでの上書き、ThemeProviderの入れ子で一部だけ別テーマにする方法までを整理します。

MUIの見た目を変える方法を、影響範囲の狭い順に4段階で整理します。sxとstyled()とテーマ上書きのどれを選ぶかの判断基準を扱います。

MUIのコンポーネントが内部に持つ部品（slot）へpropsを渡す方法と、部品自体を差し替える方法を解説します。v9で廃止されたInputPropsやcomponentsPropsからの移行も扱います。

v9のMUIでダークモードを実装する手順を、CSS変数方式の仕組み・useColorSchemeでの切り替えUI・初回表示のちらつき対策まで解説します。

MUIで画面幅に応じた表示を作る3つの方法を、それぞれの向き不向きから整理します。useMediaQueryのSSRでの挙動とコンテナクエリも扱います。

MUIの入力系コンポーネントを、controlled/uncontrolledの違いとエラー表示の作法から整理します。Autocompleteで頻発する「値が選択されない」問題の原因も扱います。

ダイアログ・通知・メニューの基本的な書き方と、閉じる理由の受け取り方を解説します。Portalで描画される位置とフォーカス管理の仕組みも扱います。

MUIが最初から面倒を見てくれる範囲と、自分で書く必要がある部分を切り分けます。v9で入ったStepperの構造変更・ハイコントラストモード・prefers-reduced-motion対応も扱います。

MUIのスタイルが外からの上書きに強い理由と、カスケードレイヤーを使って共存させる方法を解説します。Tailwind CSSと同じプロジェクトで使うときの設定も扱います。