首先，我们给出几个关键结论：在React组件中动态传递CSS变量时，style对象必须使用字符串键名，例如{'--primary-color': '#007bff'}，而不能写成--primaryColor或primaryColor——这两种写法都无法被识别为有效的CSS自定义属性。
为什么style={{ '--color': 'red' }}有时会失效
这并非React或浏览器的bug，而是由于作用域未正确匹配。CSS自定义属性仅在定义它的元素及其后代节点中有效，并且还需要相应的CSS规则通过var(--color)来引用它。
- 首先，检查目标元素是否确实渲染了需要该变量的样式（如文本颜色或背景色）。例如，如果
color: var(--color)写在父级选择器中，但变量却定义在子div上，那么子div本身并未使用该变量，导致变量“悬空” - 其次，确认CSS文件已正确加载，并且
var(--color)出现在生效的选择器内（例如.btn { color: var(--color); }），而不是仅仅定义却未被引用 - 另外，避免将变量设置在空标签上（如
），而实际内容位于兄弟节点中——变量无法跨越兄弟元素继承 - 如果使用了
React.memo，请确保style对象每次都是新的引用，否则更新可能被跳过。推荐使用useMemo进行包装：useMemo(() => ({ '--color': color }), [color])
如何在style中正确书写带横线的变量名
所有包含横线、斜杠或数字开头的CSS变量名，都必须使用字符串作为对象的键名，而不能依赖驼峰命名转换。React并不会自动将--font-size-xs转换为--fontSizeXs，如果尝试驼峰写法，会导致变量失效。
- ✅ 正确写法：
{'--font-size-xs': '12px'}、{'--bg-url': "url('/img.png')"} - ❌ 错误写法：
--fontSizeXs: '12px'（语法报错）、fontSizeXs: '12px'（被当作普通属性忽略） - 当值为
null或undefined时，React会跳过设置该变量；使用color || undefined比color ?? ''更安全，空字符串可能触发异常解析
与className混用时的常见陷阱
当同时使用className加载CSS规则并通过style注入变量时，最容易遇到的问题就是作用域冲突和优先级误解。
- 如果变量定义在A元素上，但
var(--x)写在B元素的CSS中，而B并非A的后代节点，则变量不可见 - 全局变量（例如
:root { --x: red; }）会被通过style注入的变量覆盖，但覆盖范围仅限于该元素及其后代节点；不能期望style修改:root本身 - 在SSR（服务端渲染）场景下，首屏可能会先渲染无变量的CSS，然后由JavaScript注入变量，导致样式闪烁。如果需要服务端同步，可以考虑配合
getServerSideProps或使用CSS-in-JS方案 - 对于动画库（如
react-transition-group），如果依赖var(--duration)，务必确保style直接设置在CSSTransition包裹的DOM节点上，而不是仅设置在外层容器
最容易忽略的一点是：变量名的大小写必须完全一致。--PrimaryColor和--primaryColor被视为两个不同的变量，CSS中var(--primaryColor)无法读取前者。浏览器区分大小写，React不会自动纠正错误。
