MUI / Material UI

🎨 Design Tokens

✨ 核心特征

• 开箱即用 — 57个组件无需配置即可产出专业界面
• 高度可定制 — ThemeProvider + CSS变量覆盖，灵活调整
• Material Design — 遵循Google设计语言，适合B端/后台系统
• 文档完备 — 可能 是开源UI库中最好的文档

💻 代码示例

// 基础使用
import { Button, TextField } from '@mui/material';

<Button variant="contained" color="primary">
  Hello World
</Button>

<TextField label="Email" variant="outlined" />

// 主题定制
const theme = createTheme({
  palette: { primary: { main: '#2196F3' } }
});

🔑 深度理解

• Elevation (高程) — 通过z-index和阴影模拟纸的浮动感，层级清晰
• Ripple (波纹) — 点击时的涟漪反馈，增强交互感知
• Responsive (响应式) — 移动端优先，适配各种屏幕尺寸
• 无障碍 — 内置ARIA支持，键盘导航友好

缺点：体积较大(~30KB)，默认样式较为"Google"，个性化空间有限