美学引擎 数字碎片 趋势 留言 关于
Design System Audit · MUI

MUI (Material UI)

Audit 018 #React #MaterialDesign #ComponentLibrary

Design Tokens

Primary
Paper
Primary Dark
Light Blue

Design Philosophy

Material = Elevation + Motion + Surface

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

Code Example

import { Button, TextField } from '@mui/material'; <Button variant="contained" color="primary"> Hello World </Button> <TextField label="Email" variant="outlined" />

Personal Insights

MUI 的核心价值:

缺点:

体积较大(压缩后 ~30KB),样式默认较为"Google"

Resources