Material UI主题对象需显式启用cssVariables: true才能映射为CSS变量，如--mui-palette-primary-main；变量由CssBaseline注入且依赖ThemeProvider，sx属性不支持var()函数，须通过theme路径引用或styled封装实现桥接。
Material UI 主题对象怎么映射到 CSS 变量
Material UI 的 createTheme 默认不输出 CSS 变量，必须显式启用 cssVariables: true 才会把 palette、spacing、typography 等配置编译为 :root 下的 --mui-* 变量。否则你写的 var(--color-primary) 永远不会被赋值。
启用后生成的变量名有固定前缀和结构，比如：
-
--mui-palette-primary-main对应theme.palette.primary.main -
--mui-spacing-2对应theme.spacing(2)（即 16px） -
--mui-typography-fontSize-h6对应theme.typography.h6.fontSize
这些变量由 CssBaseline 组件注入，但仅当主题通过 ThemeProvider 提供时才生效。漏掉 CssBaseline 或没包 ThemeProvider，变量就只是“声明了但没用”。
sx 属性里能直接用 var() 吗
不能。MUI 的 sx 属性解析器不支持原生 CSS 函数如 var()、calc() 或 rgb() —— 它只认 MUI 内置的简写（p、bgcolor）或主题路径（palette.primary.main）。写 sx={{ color: 'var(--my-color)' }} 会被当作字面字符串，浏览器无法解析为变量值。
立即学习“前端免费学习笔记（深入）”；
真正能桥接的方式只有两种：
- 在
sx中直接引用主题路径：sx={{ bgcolor: 'palette.background.paper' }}，MUI 会自动转成对应变量或内联值 - 用
styled+ 原生 CSS：styled(Box)(({ theme }) => ({ backgroundColor: 'var(--my-custom-bg)' }))，这时var()才起作用
混用会导致样式断裂：比如你在 sx 里写 bgcolor: 'primary.main'，又在全局 CSS 里覆盖 --mui-palette-primary-main，前者不会响应后者变化 —— 因为 sx 已在 JS 层取值并内联了。
如何让自定义 CSS 变量参与 MUI 主题计算
如果你有外部定义的变量（比如从 localStorage 读取的用户主题色），想让它影响 MUI 组件的 sx 行为，不能靠“覆盖 --mui-*”实现。MUI 主题在初始化时已固化变量映射，运行时改 :root 变量对 sx 无感知。
可行路径是用 JS 动态重建主题：
- 监听
localStorage变更，调用setTheme(createTheme({ palette: { primary: { main: storedColor } } })) - 确保
ThemeProvider接收的是新主题对象，不是旧引用 - 避免在
sx中硬编码颜色值，全部走palette.*路径
注意：每次 createTheme 都会重新生成所有变量，频繁调用有性能开销；建议只在用户确认保存主题后触发，而非实时监听。
Shadow DOM 场景下怎么穿透 MUI 的 CSS 变量
Web Components 中使用 MUI 组件时，ThemeProvider 注入的 :root 变量默认无法穿透 Shadow DOM 边界。即使你在 shadowRoot 外设置了 --mui-palette-primary-main，组件内部也读不到。
必须显式桥接：
- 在 shadow root 中手动设置变量：
shadowRoot.style.setProperty('--mui-palette-primary-main', getComputedStyle(document.documentElement).getPropertyValue('--mui-palette-primary-main')) - 或用
::part()+exportparts暴露子元素，再在宿主 CSS 中用part="input"控制样式 - 更稳妥的做法是绕过
sx，用styled封装组件，并在样式函数中读取getComputedStyle获取当前变量值
别指望 CssBaseline 自动处理 Shadow DOM —— 它只操作 light DOM 的 :root。
