SuperAPI AI 工具集

mui

设计与创作

查看项目

更新于 10-15 17:27

技能介绍

用途:提供 Material-UI v7(2025 年 3 月发布)的组件使用、sx prop 样式、主题集成与响应式设计模式,适用于编写 MUI 界面的场景。

主要能力:覆盖 Box、Grid、Paper、Typography、Button、Card、Dialog、TextField 等常用组件;sx prop 内联样式与独立样式文件两种组织方式;通过 useTheme 或 sx 回调访问主题令牌;基于 xs/sm/md/lg/xl 断点的移动优先响应式写法;表单、加载状态(CircularProgress、Skeleton)、图标等常见模式;以及 useMuiSnackbar 等 MUI 专属 hooks。

v7 破坏性变更:深层导入不再可用,改用 package exports;Modal 移除 onBackdropClick,改用 onClose;所有组件统一使用 slots 与 slotProps;支持通过 enableCssLayer 配置 CSS layers(可与 Tailwind v4 配合)。

使用方式:从 @mui/material 导入组件,用 SxProps<Theme> 类型标注样式对象;简单组件(少于 100 行)在文件顶部定义样式,复杂组件拆分为 .styles.ts 文件;优先使用主题令牌(如 primary.main、p: 2)而非硬编码颜色与像素值。

适用场景:React 项目中使用 MUI v7 构建布局、表单、卡片、对话框与响应式界面。

限制:资料未提供安装命令、版本兼容细节、性能数据或收费信息;具体 API 行为以官方文档为准。