用途
MUI Theming 是面向 Material UI(MUI)的主题定制技能,用于集中定义和管理 React 应用的视觉样式。它围绕 createTheme() API 组织内容,帮助开发者建立统一的设计系统,并支持深色模式与组件级样式覆盖。
主要能力
createTheme() API
createTheme 是所有 MUI 定制的入口,接受一个深度可选的主题对象并与默认值合并。可配置的顶层字段包括 palette、typography、spacing、shape、breakpoints、shadows、transitions、zIndex。
调色板(Palette)
支持标准颜色(primary、secondary、error、warning、info、success),每个颜色可指定 light、main、dark、contrastText;省略时 MUI 会从 main 自动生成。可通过 theme.palette.augmentColor 添加自定义颜色(如 neutral、brand),当 augmentColor 需要基础主题时使用两步 createTheme 调用。还可配置 background、text、divider、action 等。
排版(Typography)
可设置 fontFamily、fontSize、htmlFontSize、字重,以及 h1–h6、subtitle1/2、body1/2、button、caption、overline 各变体的字号、字重、行高、字距。支持通过 theme.breakpoints.up() 实现响应式排版。
间距(Spacing)
基于因子的间距刻度,默认单位为 8px。theme.spacing(1) 返回 '8px',支持多参数(如 theme.spacing(1, 2))。也可传入自定义函数,例如返回 rem 值。
断点(Breakpoints)
默认断点为 xs:0、sm:600、md:900、lg:1200、xl:1536,可添加自定义断点。提供 up、down、between、only 等辅助方法生成媒体查询,也可在 sx 中以对象形式使用。
形状、阴影、过渡、zIndex
shape.borderRadius 默认 4;shadows 为 24 级高度阴影数组(shadows[0] 为 'none');transitions 可配置 duration 与 easing;zIndex 可配置 mobileStepper、fab、speedDial、appBar、drawer、modal、snackbar、tooltip 等层级。
ThemeProvider 与 CssBaseline
通过 ThemeProvider 注入主题,CssBaseline 用于规范化浏览器样式并设置 body 背景。
深色模式
支持静态深色模式(palette.mode: 'dark',MUI 自动调整颜色)与基于 ColorModeContext 的动态切换。可通过 useMediaQuery('(prefers-color-scheme: dark)') 检测系统偏好。
组件级覆盖
- styleOverrides:覆盖特定组件插槽的 CSS,支持以函数形式访问 theme。
- defaultProps:为组件所有实例设置默认属性。
- variants:为现有组件添加新的命名变体(如 dashed、gradient)。
嵌套主题与主题组合
可使用 deepmerge 合并两个主题,或在子组件中通过嵌套 ThemeProvider 基于父主题创建局部覆盖主题。
TypeScript 模块增强
通过 declare module 扩展 Palette、PaletteOptions、Theme、ThemeOptions、TypographyVariants、TypographyVariantsOptions,以及 TypographyPropsVariantOverrides、ButtonPropsColorOverrides,使自定义颜色、主题变量和排版变体获得完整类型支持。
设计令牌(Design Token)模式
将颜色、间距、字体、圆角等设计决策集中为命名令牌(如 tokens.color.brand[500]),再在 createTheme 中引用,实现设计与代码的统一。
使用方式
通过 import { createTheme } from '@mui/material/styles' 创建主题,用 ThemeProvider 包裹应用,并按需引入 CssBaseline。组件覆盖在 createTheme 的 components 字段中配置。深色模式可通过 Context 或媒体查询实现。TypeScript 项目需添加模块增强声明文件。
适用场景
适用于使用 MUI 构建 React 应用、需要统一设计系统、实现主题切换(明/暗)、定制组件默认样式或扩展主题类型的开发场景。
限制
资料未提供该技能的安装命令、版本要求、收费信息或具体平台支持范围,暂未提供。