怎样在React组件中动态传递CSS变量

React中动态传CSS变量必须用字符串键如{'--primary-color': '#007bff'}，因驼峰写法不被识别；变量仅在设置元素及其后代生效，且需对应CSS规则中用var()引用，作用域、拼写、引用位置及useMemo缓存均影响生效。

React组件里动态传CSS变量，style对象必须用字符串键写法，比如{'--primary-color': '#007bff'}，不能写成--primaryColor或primaryColor——后者根本不会被识别为CSS自定义属性。

为什么style={{ '--color': 'red' }}有时不生效

根本不是React或浏览器的问题，而是作用域没对上。CSS变量只在设置它的元素及其后代生效，且依赖对应CSS规则中是否用了var(--color)读取它。

• 检查目标元素是否真的渲染了文本/背景等需要该变量的样式，比如color: var(--color)写在父级选择器里，但变量设在子div上——那子div自己没用到，变量就“悬空”了
• 确认CSS文件已加载，且var(--color)出现在生效的选择器中（例如.btn { color: var(--color); }），而不是只定义没引用
• 避免把变量设在空标签（如<div style={{ '--color': 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，再由JS注入，导致闪烁；若需服务端同步，得配合getServerSideProps或CSS-in-JS方案
• 动画类（如react-transition-group）依赖var(--duration)时，务必确保style直接挂在CSSTransition包裹的DOM节点上，不能只设在外层容器

最常被忽略的一点：变量名拼写大小写必须完全一致——--PrimaryColor和--primaryColor是两个变量，CSS里var(--primaryColor)读不到前者。浏览器区分大小写，React不帮你纠错。