material-ui 是什么，React 后台开发的组件库

接手一个 React 项目，打开 package.json 看到 @mui/material 这个依赖，老同事随口说了句这是 material-ui，你可能对不上号。其实它从 v5 起改名为 MUI，包名也从 @material-ui/core 换成了 @mui/material，说的是同一个东西。

它提供什么

material-ui 是按 Google Material Design 规范做的 React 组件库，按钮、表单、表格、弹窗、侧边栏抽屉都是现成的，开箱即用还带无障碍支持。后台管理系统用得最多，DataGrid 一个组件就把排序、筛选、分页、行选择全做完了。

安装和第一个组件

npm install @mui/material @emotion/react @emotion/styled

v5 起样式引擎换成 emotion，这俩依赖必须一起装。图标单独一个包：npm install @mui/icons-material。写个按钮大概是：

import Button from '@mui/material/Button'; function App() { return <Button variant='contained'>保存</Button>; }

主题定制和字体

默认主色是蓝色，想换成公司品牌色，用 createTheme 加 ThemeProvider，改 palette.primary.main 就全局生效。小范围微调用 sx 属性直接写在组件上，不用另建样式文件。中文项目还要注意字体，默认的 Roboto 对中文效果一般，多数情况换成系统默认字体栈更好看。

选型上给个实在的判断：设计稿本来就是 Material 风格，用它最省事，组件密度和交互习惯都是现成的；要完全按自定义设计稿走，覆盖默认样式的成本不低，这种项目选更轻量的库反而舒服。