mui/material-ui
6 articles
前提知識
- ›React の基礎（コンポーネント、hooks、context）
- ›CSS-in-JS の基本的な概念（styled-components または Emotion のパターン）
- ›npm/pnpm およびモノレポの概念に関する基本的な知識
01
Material UI の内部構造：アーキテクチャとパッケージ依存ピラミッド
Material UI の pnpm モノレポが、基盤ユーティリティからスタイリングエンジンの抽象化、コンポーネントライブラリ本体へと続く四層の依存ピラミッドとしてどのように構成されているかを解説します。
02
styled() の内部構造：createStyled パイプラインを読み解く
Material UI のスタイリングを支えるファクトリ関数 createStyled を徹底解説。3ゾーン式の expression パイプライン、バリアントマッチング、パフォーマンス最適化の仕組みを明らかにします。
03
Material UI コンポーネントの解剖学：Props からピクセルまで
Button コンポーネントを分解し、すべての Material UI コンポーネントが従う5ファイル規約、props 解決チェーン、ownerState パターン、CSS クラス生成システムを明らかにします。
04
デュアルパス・テーマシステム：クラシックオブジェクトと CSS Variables
createTheme がクラシックな JS テーマと CSS カスタムプロパティの間でどのようにルーティングを行うか、そして (theme.vars || theme) パターンがすべてのコンポーネントを両方のモードに対応させる仕組みを解説します。
05
ビルドパイプライン、エラーの最小化、そして開発者ツール
Material UI のプロダクション品質を支える、Babel ベースのエラー最小化システム、TypeScript から PropTypes への自動生成、Nx によるビルドキャッシュ、そしてドキュメント開発ワークフローを解説します。
06
コンポーネントカスタマイズの5つのレイヤー
Material UI が提供するすべてのカスタマイズ機構を体系的に整理します。theme の defaultProps から CSS @layer による詳細度制御まで、それぞれがどのように組み合わさって決定論的なカスケードを形成するかを解説します。