react中css变量名必须用字符串键（如{'--primary-color': '#007bff'}），驼峰或省略横线写法无效；变量大小写敏感、作用域限于设置节点及后代；ssr需:root兜底；scss混合使用应加下划线前缀隔离命名。
React中style对象必须用字符串键写CSS变量名
React的style属性不支持驼峰式转换，所有含横线、斜杠或数字开头的CSS变量名（如--font-size-xs、--primary-color）都得用字符串作为对象键。写成{ '--primary-color': '#007bff' }才生效；写成{ --primaryColor: '#007bff' }或{ primaryColor: '#007bff' }会被完全忽略。
常见错误现象：变量设了但样式没变，检查控制台是否报Invalid property name或直接没渲染出style="--primary-color: #007bff"——那基本就是键名写法错了。
- 变量名大小写敏感：
--PrimaryColor和--primaryColor是两个不同变量 -
null或undefined值会被React跳过，推荐用color ?? undefined而非color || ''，空字符串可能触发解析异常 - 动态拼接变量名时，必须确保整个键是字符串：
{ [`${prefix}-color`]: value }合法，但{ prefix + '-color': value }在TS里需加类型断言
变量作用域只影响设置元素及其后代
CSS变量不是全局广播，它只在你挂载style的DOM节点上生效，并向下透传给所有后代。如果把变量设在<div style="{{"></div>上，而实际要变色的是兄弟节点<span classname="target">text</span>，那target根本读不到--bg。
典型踩坑场景：
- 变量设在容器上，但
var(--bg)写在子组件的SCSS里，而该子组件被React.memo包裹且style对象引用没变 → 更新被跳过 - 用了
useMemo(() => ({ '--bg': color }), [color])但忘了依赖数组漏了color，导致变量始终是初始值 - SSR首屏渲染时JS未执行，
style没注入 → 页面闪一下才变色，需配合:root兜底或服务端注入
与SCSS混合使用时注意变量命名隔离
在SCSS组件里用var(--nav-item-color)前，得先定义带默认值的私有变量，比如--_nav-item-color: var(--nav-item-color, #007bff)。下划线前缀表明这是内部封装层，避免和外部主题变量冲突。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
这样做的关键好处是：外部只需传--nav-item-color，组件内部自动回退到默认值，且不会污染全局命名空间。
- 别把
var(--x)直接写在父级选择器里，指望子组件继承——子组件没声明--x，它就只能读到:root定义的值（如果有的话） - 动画类如
react-transition-group依赖var(--duration)时，必须把style直接挂在CSSTransition包裹的真实DOM节点上，不能只设在外层容器 - 全局
:root变量可被style覆盖，但仅限于该元素及后代；想改:root本身？得用document.documentElement.style.setProperty()
主题切换时优先用:root + data-theme而非逐个组件传
对整站主题切换，硬编码每个组件的style太重。更稳的做法是在index.css里用:root和[data-theme="dark"]批量定义变量，再由body或App根节点控制data-theme属性。
React里只需：
- 用
useEffect修改document.documentElement.setAttribute('data-theme', 'dark') - 确保所有用到
var(--color)的地方都已加载对应CSS规则（比如.button { background: var(--primary-bg); }） - 避免在
style里重复定义同一变量——它会覆盖:root，但只影响局部，容易造成逻辑混乱
真正难的不是设变量，而是确保变量从定义、传递、引用到回退这整条链路里，每一环的拼写、作用域、时机都对得上。漏掉任何一个，变量就“悬空”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
