直接用:root声明CSS变量会导致样式泄漏，因为:root是全局作用域，所有组件共享同一变量值，修改一处即影响全部，破坏组件隔离性；正确做法是将变量定义在组件根选择器（如[data-id="abc123"]）或内联style中，确保作用域限定于当前组件DOM树。
为什么直接用 :root 声明 CSS 变量会导致样式泄漏？
因为 :root 是全局作用域，所有组件读取的都是同一份变量值。哪怕你在组件内修改了某个变量，比如 --bg-color，只要没加作用域限制，其他组件里同名变量也会跟着变——这不是“动态隔离”，是动态污染。
真正要隔离，得让变量只在组件 DOM 树内部生效。常见错误是写成：
:root {
--bg-color: #fff;
}
这等于把开关装在楼道总闸上，一按全楼断电。
用 style 属性 + data- 属性实现局部作用域
React 组件渲染时，给根元素加上唯一 data-id，再用属性选择器限定变量作用范围。这样变量只对当前组件树生效，不干扰兄弟组件。
立即学习“前端免费学习笔记（深入）”；
- 在组件 JSX 中给最外层元素加
data-id={id}（可用useId()或Math.random().toString(36).substr(2, 9)） - 在 CSS 中用
[data-id="xxx"]作为前缀声明变量，例如：[data-id="abc123"] { --bg-color: #f0f0f0; --text-color: #333; } - 组件内所有子元素用
color: var(--text-color)等，自动继承该作用域下的变量值
如何在运行时安全更新组件级 CSS 变量？
不能直接改 document.documentElement.style，那又是全局操作。正确做法是只操作当前组件根元素的 style 属性：
- 用
ref拿到组件根 DOM 节点 - 用
ref.current.style.setProperty('--bg-color', '#eee') - 确保该节点有
data-id，否则变量更新后无作用域约束，仍可能被其他组件读取 - 注意：频繁调用
setProperty不影响性能，但避免在 render 中重复执行（如放在useEffect或事件回调里）
遇到 var(--x) is not defined 报错怎么办？
这不是语法错误，而是浏览器找不到对应变量定义。常见原因：
- 变量声明位置不在当前元素或其祖先上（比如只写了
:root，但组件没继承:root的作用域） -
data-id值前后不一致（JS 中生成一次，CSS 中硬编码另一次） - CSS 文件未加载完成就执行了
setProperty（尤其 SSR 场景下，服务端没 style 标签） - 用了
!important覆盖变量，但var()本身不支持!important，会直接失效
调试时可打开 DevTools，在元素面板里看 computed 样式中 --bg-color 是否出现在“custom properties”里，没出现就说明作用域没生效。
复杂点在于变量嵌套和 fallback 处理——比如 var(--primary, var(--fallback))，一旦外层变量未定义，会继续查内层，容易绕过预期隔离逻辑。这种链式 fallback 最好只在顶层设计时约定，组件内尽量避免多层依赖。
