CSS变量必须挂载到真实DOM节点且为子组件祖先才能继承生效，Fragment无DOM节点故无效；应使用带style的div等容器透传，避免all:unset等截断继承。
直接在 style 对象里写 { '--color': 'red' } 是无效的——变量必须挂载到真实 DOM 节点上，且该节点得是目标子组件的可继承祖先。
为什么 style={{ '--x': 'y' }} 在 Fragment 或无容器组件里不生效
CSS 自定义属性（--x）依赖 DOM 层级继承，不是 React 组件树传递。React 的 （Fragment）不生成真实 DOM 节点，所以变量根本没进树；高阶组件若返回纯函数调用或空 div，也一样断链。
- 检查 DevTools → Computed → 搜索
--x，如果显示inherited from，说明你写的那层根本没命中 - 右键父元素 → “Edit as HTML”，确认
style属性里是否真有--x: y字符串 - 避免用
all: unset、contain: style或display: none的祖先节点，它们会切断继承
用带 style 的容器元素透传变量的实操方式
最稳的路径是让 HOC 或父组件显式渲染一个容器 DOM 元素（如 div），把变量写进它的 style，再把子组件嵌套进去。
- 不要：
return {children}>;或return children; - 要：
return <div style="{themeVars}">{children}</div>;，其中themeVars = { '--primary': '#3b82f6', '--spacing': '1rem' } - 若需语义化，可用
section、article等替代div，但不能用Fragment或自定义标签（如<themeprovider></themeprovider>不渲染 DOM 就不行）
在 styled-components 或 CSS Modules 里安全消费变量
硬写 var(--color) 在 styled 组件里看似能跑，但会丢类型、无法 fallback、不响应更新——本质是绕过 React 数据流做 DOM 查询。
立即学习“前端免费学习笔记（深入）”；
- styled-components：用
ThemeProvider把变量映射为 JS 对象，再通过props.theme.colors.primary消费 - CSS Modules：在
:root或组件根元素上设style={{ '--color': value }}，SCSS 中用color: var(--color, #000);声明默认值 - 别在
useEffect里反复调用element.style.setProperty()，容易触发 layout thrashing；批量切换优先用预设 class（如theme-dark）
真正关键的不是“怎么写变量”，而是“变量是否出现在某个真实 DOM 元素的 style 属性里”，以及“这个元素是不是子组件渲染出的 DOM 的可继承祖先”——这两点漏掉任何一个，var(--x) 就只是个字符串，不会被计算。
