css变量靠继承链查找而非组件嵌套透传，子组件读不到父组件未显式声明的变量；若未找到则回退初始值（如color为黑色），常见断链原因包括all: unset、fragment、shadow dom隔离或contain: style。
CSS变量不能“层层传递”，它只靠继承链查找，不是靠组件嵌套关系自动透传——父组件没在自身DOM节点上声明--x，子组件就根本读不到。
为什么子组件里var(--color)显示黑色或透明
这不是语法错误，是继承链断了。浏览器会从当前元素向上找最近的、**显式声明了该变量的祖先元素**；如果没找到，就回退到初始值（如color初始为inherit，最终计算为黑色）。常见原因：
-
:root里写了--color: red，但父组件用了all: unset或all: initial，把继承链截断了 - 父组件只是个
React.Fragment或未挂载style的高阶组件，变量压根没进真实DOM树 - 子组件是Web Component（如
<my-button></my-button>），它的Shadow DOM不继承宿主外的变量，除非你在宿主元素（即<my-button></my-button>标签本身）上设了style="--color: red" - DevTools的Computed面板里搜
--color，显示inherited from，说明中间某层根本没重定义，全靠全局兜底
React/Vue中让变量真正透传到子组件的实操方式
变量必须落在**真实DOM节点的style属性里**，且该节点要是子组件的可继承祖先。不要依赖JS对象或Fragment：
- 高阶组件必须返回一个带
style的容器元素，比如<div style="{themeVars}"><wrappedcomponent></wrappedcomponent></div>，不能用> - Vue组合式API中，用
ref拿到宿主元素后调用.style.setProperty('--primary', '#3b82f6')，尤其对第三方Web Component有效 - 避免在
useEffect里循环给多个子元素逐个设style.setProperty——性能差，易触发layout thrashing；改用预设class批量切换，如.theme-blue { --primary: #3b82f6; } - 若父组件用了
contain: style，子组件无法继承外部变量，此时变量必须在contain边界内重新声明
调试时最该盯住的三个地方
别只看代码有没有var()，重点查变量是否真被浏览器识别并继承：
- 打开DevTools → Computed → 搜索目标变量名，点开箭头看
Defined in在哪一行：如果是inherited from，说明你写的覆盖规则根本没命中 - 检查父容器元素的computed
display值——display: none会切断继承，display: contents不会 - 右键父元素 → “Edit as HTML”，确认其
style属性里是否真的出现了--x: value字符串；如果只是JS对象里有，那它不存在于DOM中
最容易被忽略的是：变量生效与否，和组件嵌套深度、JS层级完全无关，只取决于CSS选择器是否在真实DOM上声明了它——哪怕结构是平铺的，只要.card元素上有style="--color: red"，所有后代都能继承；反之，哪怕嵌套二十层，没这个声明，就是白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
