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></div>）上，而实际内容在兄弟节点——变量无法跨兄弟继承 - 如果用了
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不帮你纠错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
