018 - MUI (Material UI)

Google Material Design 的 React 实现，全球最流行的UI组件库

🏷 标签

React Material Design 组件库开源

🎨 Design Tokens

Primary

Paper

Primary Dark

Light Blue

📐 设计哲学公式

Material = Elevation + Motion + Surface

核心：通过"纸"的隐喻创造层次感，通过阴影表达深度，通过动画表达运动

💻 代码示例

import { Button, TextField } from '@mui/material';

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

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

🔑 个人理解

MUI的核心价值：

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

缺点：体积较大(压缩后~30KB)，样式默认较为"Google"

🔗 链接

官网 | GitHub | Stars: 97,867 ⭐