mui/material-ui
6 articles
前置知识
- ›React 基础知识（组件、hooks、context）
- ›基本的 CSS-in-JS 概念（styled-components 或 Emotion 的使用模式）
- ›熟悉 npm/pnpm 及 monorepo 概念
01
Material UI 内部机制：架构与包依赖金字塔
深入解析 Material UI 的 pnpm monorepo 如何构建为四层依赖金字塔——从基础工具层，经过样式引擎抽象层，直至组件库本身。
02
深入解析 styled()：createStyled 流水线的工作原理
深入剖析 createStyled —— Material UI 样式系统核心的工厂函数，揭秘其三区表达式流水线、变体匹配机制与性能优化策略。
03
Material UI 组件解剖：从 Props 到像素
以 Button 为切入点，深入剖析每个 Material UI 组件都遵循的五文件约定、props 解析链、ownerState 模式以及 CSS 类名生成系统。
04
双路径主题系统：经典对象与 CSS 变量
createTheme 如何在经典 JS 主题与 CSS 自定义属性之间进行路由，以及 (theme.vars || theme) 模式如何让每个组件同时兼容两种模式。
05
构建流水线、错误压缩与开发者工具链
深入解析 Material UI 生产质量背后的技术支撑：基于 Babel 的错误压缩系统、TypeScript 到 PropTypes 的自动生成、Nx 构建缓存，以及文档开发工作流。
06
组件定制的五个层次
全面梳理 Material UI 的每一种定制机制——从 theme default props 到 CSS @layer 优先级控制——以及它们如何组合成一个确定性的级联体系。