Mui 说明文档

# MUI v7 模式技能 一套用于在 React 应用程序中处理 Material-UI v7 组件、样式和最佳实践的综合技能。 ## 目的 本技能为构建 Material-UI v7（2025 年 3 月发布）的 React 应用程序提供指导和模式。它涵盖了组件使用、sx 属性样式系统、主题集成、响应式设计和 MUI 特定工具。 MUI 是最受欢迎的 React UI 库之一，v7 引入了许多与 v6 相比的重大变更。此技能可帮助开发人员在遵循一致、类型安全模式的同时应对这些变更。 ## 何时使用 在以下情况使用此技能： - **使用 sx 属性设置组件样式** - 需要关于 MUI 样式方法的指导 - **使用 MUI 组件** - 使用 Box、Grid、Paper、Typography、Button、Card、Dialog 等 MUI 组件 - **自定义主题** - 设置或修改 MUI 主题 - **构建响应式布局** - 使用 MUI 的断点系统进行移动优先设计 - **使用 MUI 工具和钩子** - 使用 useTheme、useMediaQuery 或自定义 MUI 钩子 - **从 MUI v6 迁移** - 理解 v7 的重大变更 **触发短语：** - "style with sx prop" - "MUI component" - "Material-UI" - "theme customization" - "MUI responsive design" - "MUI Grid layout" ## 工作原理 1. **识别 MUI 任务** - 识别 MUI 模式何时与当前工作相关 2. **应用适当模式** - 根据组件复杂度使用正确的样式方法 3. **利用主题令牌** - 使用 MUI 的内置主题值而不是硬编码样式 4. **确保类型安全** - 为 sx 属性应用正确的 TypeScript 类型 5. **响应式构建** - 使用 MUI 的断点系统进行自适应布局 ## 关键特性 ### MUI v7 重大变更意识 该技能包含有关 v7 特定变更的指导： - 深度导入不再有效（使用包导出） - `onBackdropClick` 从 Modal 中移除（改用 `onClose`） - 所有组件采用标准化的 `slots` 和 `slotProps` 模式 - 通过 `enableCssLayer` 配置支持 CSS 层（兼容 Tailwind v4） ### 样式模式 基于组件复杂度的两种方法： - **内联样式 (= 100 行)** - 创建 `ComponentName.styles.ts` ### 完整的组件覆盖 - 布局：Box, Paper, Container, Stack - 网格系统：12 列响应式网格 - 排版：所有带有自定义样式的变体 - 表单