CSS变量需显式调用var()才生效，且依赖作用域、继承链与重计算；未在样式规则中引用、定义位置错误、Shadow DOM隔离或UI库未启用css-var支持均会导致失效。
直接用 var(--color) 就能生效，但必须确保变量已定义、作用域正确、子组件主动读取 —— 不是写了变量就自动全局可用。
为什么 document.documentElement.style.setProperty 有时不生效
常见错误是只改了变量值，但没触发 CSS 重计算链。比如：
- 在非
:root元素上设置--theme-color，子组件又没写color: var(--theme-color)，那就完全没效果 - 用了
all: initial或 shadow DOM 的组件（如某些封装的el-input），会切断继承，变量传不下去 - Vue 2 中直接用
:style="{ '--color': val }"是无效的，得靠计算属性拼字符串或借助class切换
如何让主题色真正影响 Element Plus / Ant Design Vue 组件
这些 UI 库本身依赖自己的 SCSS 变量（如 $--color-primary），CSS 变量不会自动穿透。必须做两件事：
- 在构建时把 SCSS 变量映射到 CSS 变量，例如：
$--color-primary: var(--theme-color, #409EFF); - 确保组件样式最终编译后使用的是
var(--theme-color)，而不是硬编码颜色值 - Element Plus 官方推荐方式是通过
el-config-provider+theme属性配合 CSS 变量，而非手动覆盖:root
:style 绑定和 class 切换怎么选
两者不是互斥，而是分工不同：
立即学习“前端免费学习笔记（深入）”；
- 用
:style动态绑定--accent-hue、--opacity这类数值型微调，适合滑块调节、A/B 测试 - 用
class（如data-theme="dark"）切换整套预设变量，避免 JS 频繁操作 DOM 属性 - 混合用最稳妥：根节点加
data-theme控框架，再用:style在局部组件里微调按钮 hover 透明度等
最容易被忽略的是：CSS 变量本身不“主动渲染”，它只是个占位符；只有当某条 CSS 规则里明确写了 color: var(--text-color)，这个变量才真正参与计算。别指望设了 --bg-color，所有 background 就自动变 —— 每个用到的地方都得显式调用 var()。
