第三方UI库不响应CSS变量是因为默认未启用支持，必须显式开启：Ant Design 5+需ConfigProvider设cssVar:true，Element Plus需el-config-provider开启css-var，MUI v6+须createTheme({cssVariables:true})，且所有配套变量（如--bs-primary-rgb）须完整覆盖。
不能直接靠改 :root 里的 --primary-color 就让第三方库变色——绝大多数 UI 库默认压根不读这些变量，你改了等于白改。
确认库是否真正支持 CSS 变量
Ant Design 5+、Element Plus、MUI v6+ 等新版本确实支持，但必须显式启用，不是开箱即用。
- Ant Design：在
ConfigProvider上加theme={{ cssVar: true }}，否则--ant-primary-color这类变量不会生成 - Element Plus：用
el-config-provider的css-var属性设为true，同时确保namespace一致（避免变量名被覆盖） - MUI：必须用
createTheme({ cssVariables: true })创建主题，且组件要包裹在ThemeProvider内 - Bootstrap 5：它有
--bs-primary，但按钮边框颜色实际来自--bs-primary-border-subtle，漏掉任一配套变量，对应状态就回退默认值
重写整套衍生变量，别只改一个
像 Bootstrap 或自定义主题系统，单改 --bs-primary 不够，因为它的样式规则是链式依赖的：
-
rgba(var(--bs-primary-rgb), .1)要求--bs-primary-rgb是纯数字三元组（如74, 111, 165），带括号或单位会解析失败 -
--bs-primary-text-emphasis控制文字深色，--bs-primary-bg-subtle控制背景浅色，缺一不可 - 所有变量名大小写、连字符、命名空间都必须和源码中完全一致，差一个字符就失效
推荐一次性覆盖全部相关变量：
立即学习“前端免费学习笔记（深入）”；
:root {
--bs-primary: #4a6fa5;
--bs-primary-rgb: 74, 111, 165;
--bs-primary-text-emphasis: #2c3e50;
--bs-primary-bg-subtle: #e8f0ff;
--bs-primary-border-subtle: #b8d0ff;
}
React/Vue 中变量无法透传到子组件 DOM
框架组件本身不解析 CSS 变量，变量链在组件边界就断了。子组件渲染出的 DOM 节点若不在你设置变量的节点作用域内，就拿不到值。
- React：在根容器上用
style={{ '--color-brand': props.themeColor }}，确保子组件挂载在其内部 - Vue：用
:style="{ '--color-brand': themeColor }"绑定到最外层标签 - 弹窗、Tooltip、Select 下拉等用
createPortal渲染到document.body的组件，变量不会继承——得手动把style也传进去，或用getComputedStyle(document.documentElement).getPropertyValue('--color-brand')动态读取
Shadow DOM 里变量必须显式注入
如果子应用挂载在 shadowRoot（微前端常见），:root 变量默认进不去。浏览器把 shadow tree 当作独立样式上下文，document.documentElement 的变量对它不可见。
- 不能靠
<link rel="stylesheet">注入全局 CSS 变量，得手动创建<style>标签并 append 到shadowRoot - 变量需从宿主文档读取后，再写入 shadow 内的
<style>，例如：const style = document.createElement('style'); style.textContent = `:host { --cui-primary: ${primary}; }`; - 用
attachShadow({ mode: 'closed' })后，外部 JS 无法访问shadowRoot，所以变量注入逻辑必须在子应用初始化时同步执行
最容易被忽略的是：CSS 变量不是“设一次就全局生效”，它依赖 DOM 结构和作用域链；任何跨边界（组件、portal、shadow）的渲染，都得手动补上变量传递，否则就是黑盒失效。
