← 返回基因库
其他

使用 MUI v7 开发 React 界面时，按 v7…

在基于 Material-UI v7 的 React 项目中，需要用 sx、theme、断点和 MUI 组件构建界面时使用。

被复用0 次
复用有效—
置信度55%
沉淀时间2026-09-23
🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）
来自 guoleo 的小呱沉淀
GDI C 35/100

进化评分（GDI）

综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」

内在质量 55/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 39/100 ×0.15

适用场景

使用 MUI v7 开发 React 界特定

解决思路

  1. 基础用法：从 @mui/material 导入 Box、Typography、Button、Paper 等组件，并用 Record<string, SxProps<Theme>> 定义样式对象。
  2. 组件样式：把 styles 传给 Paper、Box、Typography、Button 等组件的 sx 属性，例如 Paper sx={styles.container}。
  3. 当组件样式简单或代码小于 100 行：在组件文件顶部定义 componentStyles: Record<string, SxProps<Theme>>，再通过 sx 使用。
  4. 当组件样式复杂或代码大于等于 100 行：创建独立样式文件，例如 UserProfile.styles.ts，导出 userProfileStyles: Record<string, SxProps<Theme>>，在 UserProfile.tsx 中 import { userProfileStyles as styles } 后通过 sx={styles.container} 使用。
  5. 布局组件：用 Box 作为通用容器并设置 sx；用 Paper 作为带 elevation 的表面；用 Container maxWidth 居中限宽；用 Stack spacing 和 direction 做 flex 间距布局。
  6. Grid 系统：用 Grid container spacing 配合 Grid item xs、sm、md、lg 等做 12 列响应式网格，并按断点控制列数。
  7. Typography：使用 variant 为 h1、h2、body1、caption 等；需要自定义时在 sx 中设置 color、fontWeight、mb 等。
  8. Buttons：使用 variant 为 contained、outlined、text；使用 color 为 primary、secondary、error；从 @mui/icons-material 导入图标并用 startIcon 添加图标。
  9. 主题集成：用 useTheme() 获取 theme，并在 sx 中引用 theme.palette.primary.main、theme.palette.primary.contrastText、theme.shape.borderRadius 等。
  10. 在 sx 中直接使用主题 token：例如 color 为 primary.main、bgcolor 为 background.paper、p 为 2、borderRadius 为 1；需要高级逻辑时使用 sx={(theme) => ({ ... })} 回调，例如在 &:hover 中引用 theme.palette.primary.dark。
  11. 响应式数值：在 sx 中为 width、display、fontSize、lineHeight 等传入对象，使用 xs、sm、md、lg、xl 断点值；例如 width 为 { xs: '100%', sm: '80%', md: '60%', lg: '40%', xl: '30%' }，display 为 { xs: 'none', md: 'block' }。
  12. 表单：用 Box component=form onSubmit={handleSubmit} 包裹，Stack spacing={2} 排列；TextField 使用 label、type、value、onChange、fullWidth、required、error、helperText；提交按钮使用 type=submit、variant=contained。
  13. Card 模式：使用 Card、CardContent、CardActions、Typography、Button 组合；标题用 Typography variant=h5 component=div，描述用 Typography variant=body2 color=text.secondary。
  14. Dialog/Modal 模式：使用 Dialog open、onClose，DialogTitle、DialogContent、DialogActions 和 Button 实现确认对话框；v7 中不要用 onBackdropClick，改用 onClose。
  15. Loading 状态：用 CircularProgress 放在居中 Box 中；或用 Skeleton variant=text、rectangular 和 width、height 做骨架屏。
  16. MUI 专用 hooks：使用 useMuiSnackbar 的 showSuccess、showError、showInfo 展示保存成功、失败等提示。
  17. Icons：从 @mui/icons-material 导入图标并重命名，例如 Add as AddIcon、Delete as DeleteIcon；在 Button 中用 startIcon，在 IconButton 中放图标。
  18. 最佳实践类型：为 sx 样式对象显式标注 Record<string, SxProps<Theme>>，避免失去类型安全；从 @mui/material 导入 type SxProps、Theme。
  19. 主题 token：优先使用 theme token，例如 color 为 primary.main、p 为 2，避免硬编码颜色和像素值，例如 #1976d2、16px。
  20. 间距一致性：使用 MUI spacing scale，例如 p: 2、mb: 3、mt: 1，避免随机像素值，例如 17px、25px。
  21. v7 破坏性变更：不再使用深层导入，改用 package exports field；Modal 的 onBackdropClick 移除，改用 onClose；所有组件使用标准化 slots 和 slotProps；可通过 enableCssLayer 配置支持 CSS layers，并与 Tailwind v4 配合。
  22. 需要高级样式、组件示例和主题设置时，查阅 resources/styling-guide.md、resources/component-library.md、resources/theme-customization.md。
  23. 遇到 MUI v7 组件时优先按 sx、theme token、断点和 slots/slotProps 模式实现，避免沿用 v6 的深层导入和旧 Modal API。

适用边界 · 注意事项