react中style对象正确设置css变量的唯一方式是style={{ '--color-primary': '#007bff' }}；键必须为带引号的字符串且保留双横线格式，驼峰命名或省略引号均无效。
React中style对象怎么正确设置CSS变量
直接写 style={{ '--color-primary': '#007bff' }} 是唯一能生效的方式；用驼峰命名（如 colorPrimary）或省略引号（--color-primary: '#007bff'）都会被React忽略，变量根本不会进DOM。
关键点：
- 键必须是字符串，带引号，且保留原始横线格式：
'--font-size-xs'✅，--fontSizeXs❌ - 值为
null或undefined时，React会跳过该属性设置（等效于移除）；传空字符串''可能导致浏览器解析异常 - 若变量值来自状态（如
const [themeColor, setThemeColor] = useState('#007bff')），务必用useMemo缓存style对象，否则每次渲染都新建对象，触发无意义重绘
为什么组件里读不到自己设的CSS变量
不是React的问题，是CSS作用域规则在起作用：你在某个 div 上通过 style={{ '--bg': 'red' }} 设置了变量，它只对该元素及其后代生效；如果样式规则写在全局 :root 或父组件里，且目标元素没继承、也没显式用 var(--bg) 触发计算，就看不到效果。
排查步骤：
- 打开DevTools，在目标元素上右键 → “Inspect”，看Computed面板里是否列出该变量值
- 确认使用变量的CSS规则已加载：比如
.card { background-color: var(--bg); }必须存在，且该类已加到对应元素上 - 避免把变量设在空容器上（如仅含
span），而真正要着色的文本在子元素里却没应用对应class或inline style
如何让多个组件同步响应CSS变量变更
靠 document.documentElement.setAttribute('data-theme', 'dark') 单独改主题，JS层完全感知不到——useContext(ThemeContext) 拿到的还是旧值，组件也不会重渲染。必须让DOM变更驱动状态更新。
推荐做法：
- Provider初始化时从DOM读取：
useState(() => document.documentElement.getAttribute('data-theme') || 'light') - 用
MutationObserver监听document.documentElement的data-theme属性变化，回调里调用setState - 暴露的
toggleTheme函数只做两件事：改data-theme、同步写入localStorage和调用matchMedia响应系统偏好 - 组件内读变量优先走CSS（如
background-color: var(--color-bg)），极少数需JS运算时，用useEffect+getComputedStyle一次性读取并缓存，绝不放在render里反复调用
动态传CSS变量时最容易忽略的性能陷阱
getComputedStyle(document.documentElement).getPropertyValue('--color-bg') 是同步强制重排操作，滚动或动画中调用一次就可能掉帧。但更隐蔽的问题是：你以为只是“读个值”，实际上它会阻塞整个渲染管线。
所以：
- 初始化或用户主动切换主题时读一次，存进状态或Ref，后续直接用
- 不要在
useMemo或useCallback依赖数组里放getComputedStyle调用结果——它本身就不该频繁执行 - 如果变量只用于CSS，就别用JS读；如果JS逻辑真依赖它（比如根据背景色决定文字对比度），那就封装成自定义Hook，内部用
useLayoutEffect保证读取时机，并加防抖或节流
真正难的不是怎么设变量，而是让JS状态、DOM属性、CSS计算三者不脱节——一旦其中一环异步延迟或缓存失效，视觉和逻辑就会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
