react中动态传css变量必须用字符串键如{'--primary-color': '#007bff'}，驼峰或短横线错误写法均不识别；变量仅在设置元素及其后代生效，且需对应css规则中用var()引用，作用域、拼写、引用位置及usememo缓存均影响生效。
style对象必须用字符串键写CSS变量名
React的style属性不识别--color这种原生CSS语法，也不能自动把--font-size-xs转成驼峰。你得显式用字符串当key：{'--color': '#333'}才生效；写成--color或color都会被忽略。
常见错误包括：
- 误用
style={{ --color: 'red' }}→ 语法报错，JS解析失败 - 误用
style={{ color: 'var(--color)' }}→ 这是读取变量，不是注入 - 值为
null或undefined时，React会跳过该属性；用color || undefined比color ?? ''更安全，空字符串可能触发异常解析
变量只在设置元素及其后代生效
CSS变量没有继承性，只有作用域：你在<div style="{{">上设，那<code>--bg只对这个div和它所有子元素有效。如果color: var(--bg)写在兄弟节点、父节点或全局:root里，就根本读不到。
排查不生效时，优先确认：
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 目标样式规则（比如
.btn { background: var(--bg); }）是否真的应用在该div或其某个后代上 - 有没有把变量设在空容器上（如
<div style="{{" color></div>），而实际内容在兄弟<p></p>里——变量无法跨兄弟传递 - 用了
React.memo时，style对象引用没变 → 更新被跳过；推荐用useMemo(() => ({ '--bg': color }), [color])
动态更新必须收束到useEffect或事件回调
不能在render函数里反复调用ref.current.style.setProperty，但也不必非得用style对象传入。更稳妥的运行时更新方式是：
- 给组件根元素加
ref和唯一data-id（比如useId()生成） - 在
useEffect中执行ref.current.style.setProperty('--bg', color) - 避免直接操作
document.documentElement.style，否则污染全局 - SSR首屏闪烁问题：服务端没执行JS，变量不会注入；需在CSS中为关键变量提供
:root { --bg: #fff; }兜底
和SCSS混用时要隔离命名空间
SCSS编译后是静态CSS，它不知道JS里设了什么变量。两者协同的关键是命名隔离：
- 在SCSS中一律用带下划线前缀的私有变量，比如
--_text-color - 定义时写成
--_text-color: var(--text-color, #333)，既回退到JS传入值，又fallback到默认色 - 别在SCSS里直接写
color: var(--text-color)然后指望JS去设--text-color——万一JS延迟加载或失败，样式就断了 - 如果主题由
data-theme控制，记得在index.html的标签上预设该属性，让CSS能立刻生效
