用途
本技能提供 Material-UI v7（2025 年 3 月发布）的组件使用、sx prop 样式编写、主题集成与响应式设计模式，用于在 React 项目中按 MUI v7 的规范编写界面代码。
主要能力
- 使用 MUI 组件：Box、Grid、Paper、Typography、Button、Card、Dialog、TextField、Stack、Container、Skeleton、CircularProgress 等。
- 使用 sx prop 编写样式，支持内联样式（小于 100 行）与独立样式文件（大于等于 100 行）两种组织方式。
- 主题集成：通过 useTheme 获取主题，或在 sx 中直接使用主题 token（如 primary.main、background.paper、spacing、borderRadius），也支持以回调形式访问 theme。
- 响应式设计：基于 xs、sm、md、lg、xl 断点设置宽度、显示与字号等响应式值。
- MUI 专属 hooks：如 useMuiSnackbar，提供 showSuccess、showError、showInfo 等方法。
- 图标使用：从 @mui/icons-material 引入图标，配合 Button 的 startIcon 或 IconButton 使用。
使用方式
资料给出的示例包括：
- 基础组件：从 @mui/material 导入 Box、Typography、Button、Paper，并用 Record<string, SxProps<Theme>> 定义样式对象。
- 布局：Box 作为通用容器，Paper 作为带 elevation 的表面，Container 提供居中最大宽度，Stack 提供带间距的弹性布局。
- Grid：12 列网格，支持 container、item 与 xs/sm/md/lg 响应式列宽。
- 表单：使用 TextField、Stack、Button，配合 fullWidth、required、error、helperText 等属性。
- 常见模式：Card（CardContent、CardActions）、Dialog（DialogTitle、DialogContent、DialogActions）、加载状态（CircularProgress、Skeleton）。
- 最佳实践：为 sx props 添加类型（SxProps、Theme）、使用主题 token 而非硬编码颜色与像素、使用间距刻度保持一致性。
适用场景
- 使用 MUI v7 组件构建 React 界面。
- 需要按主题 token 与断点编写响应式样式。
- 需要统一组织组件样式（内联或独立样式文件）。
- 需要处理表单、卡片、对话框、加载状态等常见 UI 模式。
限制与注意事项
- 资料明确列出 MUI v7 相对 v6 的破坏性变更：深层导入不再可用，需使用包的 exports 字段；Modal 的 onBackdropClick 已移除，改用 onClose；所有组件改用标准化的 slots 与 slotProps 模式；通过 enableCssLayer 配置支持 CSS layers（可与 Tailwind v4 配合）。
- 资料未提供该技能的安装命令、收费方式、价格、平台支持范围或效果数据，这些信息暂未提供。
- 资料中提到的 useMuiSnackbar 来自 '@/hooks/useMuiSnackbar'，属于示例路径，具体实现细节暂未提供。
- 更多详细模式可参考资料提及的 styling-guide.md、component-library.md、theme-customization.md，但其内容暂未提供。