用途:提供 Material-UI v7(2025年3月发布)的组件用法、sx prop 样式、主题集成与响应式设计模式,适用于编写 MUI 组件、定制主题和使用 MUI 专用工具函数。
主要能力:介绍 Box、Grid、Paper、Typography、Stack、Button 等常用组件;sx prop 的内联样式、独立样式文件组织与 sx 回调访问主题;主题令牌(如 primary.main、background.paper、spacing、shape.borderRadius)与 useTheme;基于 xs、sm、md、lg、xl 的移动优先断点响应式值;表单、Card、Dialog、加载状态等常见模式;使用类型 SxProps 与 Theme 标注样式;以及 useMuiSnackbar 钩子的成功、错误、信息提示用法。
v7 重要变更:深层导入不再可用,改用包导出字段;Modal 移除了 onBackdropClick,改用 onClose;所有组件采用统一的 slots 与 slotProps 模式;通过 enableCssLayer 配置支持 CSS layers(可与 Tailwind v4 协作)。
使用方式:从 @mui/material 导入组件,从 @mui/icons-material 导入图标;按示例以 sx 对象声明样式;复杂组件可将样式放入单独 .styles.ts 文件。建议使用主题令牌和间距比例,避免硬编码颜色与像素值,并正确标注 SxProps<Theme> 类型。
适用场景:React 项目中构建 MUI 界面、定制主题、实现响应式布局与通用 UI 模式。
限制:资料未提供安装命令、版本兼容范围、性能或收费等信息;部分详细模式需参考随附的 styling-guide.md、component-library.md、theme-customization.md 文档。