React行内样式中写CSS变量必须用字符串键名，如{"--primary-color": "#007bff"}；驼峰或短横线非法写法会被忽略，且需确保变量作用域覆盖目标元素并配合var()引用生效。
React行内样式里怎么写CSS变量
直接用style对象无法原生支持--my-var这种自定义属性写法，因为React会把带连字符的键名当非法JS标识符过滤掉。必须用字符串键名加引号包裹，且值要带单位（如"16px"）或显式转成字符串。
-
style对象中写{"--primary-color": "#007bff"}才有效，写--primary-color: "#007bff"会报语法错误 - 变量值如果是数字（比如
fontSize: 14），必须手动加单位：{"--font-size": "14px"}，否则浏览器不识别 - 不能在
style里混用驼峰和短横线写法：例如backgroundColor和"--bg-color"可以共存，但background-color会直接被React忽略
动态更新CSS变量时为什么样式没变
React的style是浅比较，如果每次渲染都新建一个对象（哪怕内容相同），React会认为样式变了并重设整个style属性——这本身没问题；但如果你依赖该变量的子元素用了var(--x)却没重渲染，就会看起来“没生效”。根本原因常是父组件传入的变量值没真正变化，或CSS变量作用域不对。
- 确保CSS变量注入在能影响目标元素的祖先节点上，比如想控制
.card的背景色，就得把style加在.card或其任意父容器上 - 检查是否误把变量写在了不相关的DOM节点上，比如写在
div里但实际生效的是button里的var(--color)，而button没继承该div的样式作用域 - 调试时可在DevTools里选中目标元素，看Computed面板里
var(--x)解析后的值是否为空或invalid
useEffect里批量设置多个CSS变量的安全写法
别直接在useEffect里操作document.documentElement.style或ref.current.style，这绕过了React的更新机制，容易和后续style prop冲突。应该把所有变量收拢到一个对象里，统一交给style prop驱动。
- 用
useState或useMemo生成稳定的style对象，避免每次渲染都创建新引用（除非确实需要更新） - 变量名和值都应来自状态或配置，不要硬编码字符串，比如：
{"--spacing-xs": `${spacing.xs}px`, "--radius-sm": theme.radius.sm} - 若需响应主题切换，把主题对象解构进
style，而不是在useEffect里手动setProperty——后者会导致React无法追踪变更来源
SSR场景下CSS变量注入失败的典型表现
服务端渲染时，document不存在，任何直接读写document.documentElement.style的代码都会报错；更隐蔽的问题是，服务端生成的HTML里没有这些变量，客户端首次渲染时变量才注入，导致FOUC（闪动）或初始样式错乱。
立即学习“前端免费学习笔记（深入）”；
- 永远不要在组件顶层或
useEffect外使用document相关API - 服务端默认值必须和客户端一致：比如
theme对象在服务端也应提供默认--color-primary值，可通过getServerSideProps或createContext预置 - 若必须运行时注入，用
useLayoutEffect代替useEffect，它在浏览器绘制前同步执行，能减少闪动
--x，子元素var(--x)才能取到，而这个“父元素”必须是React实际渲染出来的那个DOM节点，不是逻辑上的父组件。 
