mui

# MUI v7 模式 ## 目的 Material-UI v7（2025 年 3 月发布）的组件使用、sx 属性样式、主题集成和响应式设计模式。 **注意**：MUI v7 与 v6 的重大变更： - 深度导入不再有效 - 使用包导出字段 - `onBackdropClick` 从 Modal 中移除 - 改用 `onClose` - 所有组件现在使用标准化的 `slots` 和 `slotProps` 模式 - 通过 `enableCssLayer` 配置支持 CSS 层（与 Tailwind v4 兼容） ## 何时使用此技能 - 使用 MUI sx 属性设置组件样式 - 使用 MUI 组件 (Box, Grid, Paper, Typography 等) - 主题自定义和使用 - 使用 MUI 断点进行响应式设计 - MUI 特定工具和钩子 --- ## 快速入门 ### 基础 MUI 组件 typescript import { Box, Typography, Button, Paper } from '@mui/material'; import type { SxProps, Theme } from '@mui/material'; const styles: Record<string, SxProps> = { container: { p: 2, display: 'flex', flexDirection: 'column', gap: 2, }, header: { mb: 3, fontSize: '1.5rem', fontWeight: 600, }, }; function MyComponent() { return ( Title Action ); } --- ## 样式模式 ### 内联样式 (< 100 行) 对于样式简单的组件，在顶部定义样式： typescript import type { SxProps, Theme } from '@mui/material'; const componentStyles: Record<string, SxProps> = { container: { p: 2, display: 'flex', flexDirection: 'column', }, header: { mb: 2, color: 'primary.main', }, button: { mt: 'auto', alignSelf: 'flex-end', }, }; function Component() { return ( Header Action ); } ### 独立样式文件 (>= 100 行) 对于复杂组件，创建独立的样式文件： typescript // UserProfile.styles.ts import type { SxProps, Theme } from '@mui/material'; export const userProfileStyles: Record<string, SxProps> = { container: { p: 3, maxWidth: 800, mx: 'auto', }, header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3, }, // ... 更多样式 }; // UserProfile.tsx import { userPro