SuperAPI AI 工具集

mui

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:面向 React 的 Material UI(MUI)v5+ 技能,用于构建基于 MUI 组件的界面、实现主题与设计系统、使用 sx prop 或 styled API 定制样式,并保持间距、排版与颜色一致。

主要能力:涵盖组件库模式(Button、TextField、Typography、布局与导航)、主题定制与暗色模式(createTheme、palette、组件覆盖)、高级样式(sx、styled API、自定义变体、性能)、数据展示(Table、DataGrid、List、Card)、表单(TextField 校验、Select、Autocomplete、Formik 集成),以及 MUI X 图表(LineChart、BarChart、PieChart,仅在需要可视化时使用)。

使用方式:按任务读取对应参考文件,如 components.md、theming.md、customization.md、data-display.md、forms.md。关键约定:用 ThemeProvider 包裹应用;一次性样式用 sx prop 并引用主题值,如 sx={{ p: 2, bgcolor: 'primary.main' }};优先使用 MUI 组件而非自定义 HTML 以获得内置无障碍支持;可复用样式用 styled() API;全局主题变更在 createTheme() 中配置。

适用场景:MUI 组件开发、主题与暗色模式、sx/styled 定制、响应式样式、表单与数据表格、MUI 与 React 集成。

限制:不适用于非 MUI 的 React(用 react 技能)、Tailwind CSS、纯 CSS/HTML 或自定义组件库。边界情况:嵌套 ThemeProvider 会合并;SSR 用 ServerStyleSheets 防止 FOUC;自定义断点通过 createTheme 配置;频繁重渲染时用 styled() 替代 sx;图标尺寸用 fontSize prop。官方文档见 https://mui.com/material-ui/getting-started/ 与 https://mui.com/material-ui/customization/theming/。