用途
该技能面向使用 MUI（Material UI）构建多租户或白标（white-label）应用的场景，提供一套实现多主题与租户专属品牌定制的模式与代码示例。核心目标是在同一套代码基础上，为不同租户或品牌呈现不同的视觉风格，包括颜色、字体、圆角、Logo、favicon 以及组件外观。
主要能力
嵌套 ThemeProvider
MUI 的 ThemeProvider 支持嵌套，内层 provider 会与外层主题合并或覆盖。可用于将不同视觉处理限定到应用的不同区域，例如为管理侧边栏单独使用深色主题，而主内容区继承主主题。
带回调的嵌套主题（合并而非替换）
向 ThemeProvider 传入函数可接收外层主题并有选择地合并，例如只覆盖 primary 颜色，其余主题继承外层。
动态主题加载
在运行时从 API 或数据库加载主题配置，这是任何白标系统的基础。示例展示了通过 fetch 获取租户品牌配置，并用 useMemo 构建主题，加载期间显示进度指示器，出错时显示错误信息。
主题组合
使用 MUI 自带的 deepmerge（@mui/utils/deepmerge）将租户覆盖项叠加到基础主题之上，确保租户只覆盖需要变更的部分，其余继承基础主题。示例定义了共享基础主题选项与各租户的差异覆盖项，并通过 createTenantTheme 组合生成最终主题。
租户专属品牌
采用基于令牌（token）的方式：从配置对象加载品牌颜色、字体、Logo、favicon 等。将品牌标识与主题机制分离。示例定义了 BrandTokens 接口，包含 id、name、主色、辅色、错误/警告/成功色、字体、标题字体、圆角、Logo URL、Logo 高度、favicon URL、明暗模式、是否使用扁平设计（无阴影）等字段，并通过 createBrandTheme 生成主题。同时使用 React context（BrandContext、useBrand、BrandProvider）在主题之外暴露品牌令牌，供头部组件等使用 Logo 等资源。
CSS 变量方案
MUI v5.1+ 支持 CssVarsProvider，使用 CSS 自定义属性存储调色板值，实现无需 React 重渲染的主题切换——浏览器只需替换变量值。示例使用 experimental_extendTheme 定义 light 与 dark 两套 colorSchemes，并通过 useColorScheme 实现模式切换按钮。在 sx 中可直接引用 CSS 变量，如 var(--mui-palette-primary-main)、var(--mui-palette-background-paper)、var(--mui-shape-borderRadius)。该方案也可与多租户结合，通过 deepmerge 将租户覆盖项合并到基础扩展主题中。
主题注册表模式
将租户 ID 映射到主题对象，适用于构建时已知租户集合或缓存 API 加载主题的场景。示例维护 tenantThemeOverrides 记录各租户相对基础主题的差异，使用 themeCache 避免每次渲染重新创建主题，提供 getTenantTheme 获取（未注册时回退基础主题并警告）以及 registerTenantTheme 动态注册并失效缓存。
按租户覆盖组件变体
租户可能需要颜色之外的组件外观差异，例如某品牌使用胶囊按钮、另一品牌使用方形按钮、第三品牌默认使用描边按钮。示例为不同租户定义 MuiButton、MuiCard、MuiChip 等组件的 defaultProps 与 styleOverrides，再与基础主题组合。
使用方式
该技能以代码示例形式呈现，涉及从 @mui/material/styles 导入 ThemeProvider、createTheme、ThemeOptions、Theme、Components 等，从 @mui/utils/deepmerge 导入 deepmerge，以及 React 的 useState、useEffect、useMemo、createContext、useContext 等。使用 CssVarsProvider 时需从 @mui/material/styles 导入 Experimental_CssVarsProvider、experimental_extendTheme、useColorScheme。示例包含完整的组件代码与用法演示。
适用场景
- 需要为多个客户或品牌提供定制化界面的 SaaS 或多租户应用。
- 需要在应用不同区域使用不同视觉风格（如深色侧边栏）。
- 需要在运行时根据租户配置动态生成主题。
- 需要在不触发 React 重渲染的情况下切换明暗模式。
- 需要按租户定制组件外观（按钮形状、卡片样式等）。
限制
资料未提供该技能的具体安装命令、版本要求、性能数据、收费信息或平台限制。CssVarsProvider 与 experimental_extendTheme 在示例中标注为实验性 API。