React中CSS变量需用驼峰式键名（如--primaryColor）；useEffect+ref适用于全局生效场景；混用className与style易致作用域混乱；SSR时CSS变量存在首屏闪烁问题。
React中用style对象设置CSS变量的正确写法
不能直接在style里写--primary-color: #3b82f6这种带破折号的键名——JS对象属性名不支持，会语法报错或被忽略。必须用驼峰式写法：--primaryColor，React才会把它当合法CSS自定义属性透传下去。
实际生效的是浏览器原生支持的setProperty行为，React只是把style对象转成内联样式字符串，所以关键在于键名格式是否匹配CSS OM规范。
示例：
const App = () => {
const [theme, setTheme] = useState('dark');
const cssVars = {
'--bg-color': theme === 'dark' ? '#1f2937' : '#ffffff',
'--text-color': theme === 'dark' ? '#f9fafb' : '#111827',
'--primaryColor': '#3b82f6', // 注意这里是驼峰
};
return <div style={cssVars}>Content</div>;
};
为什么useEffect + ref有时比style更可靠
当变量需要全局生效（比如影响子组件、伪元素::before、或CSS动画触发），仅靠父组件style可能不够：子组件没重渲染时，内联样式不会更新；伪元素无法继承style对象里的变量。
立即学习“前端免费学习笔记（深入）”；
这时得操作DOM节点本身：
-
useRef拿到根容器（如<html>或<body>） -
useEffect里调用ref.current.style.setProperty('--key', value) - 确保清理函数里重置变量，避免状态残留
注意：修改document.documentElement会影响整个页面，但style对象只能作用于当前元素及其后代（且依赖继承）。
className配合:root和style混用的边界问题
很多人想“先用className加载基础主题类，再用style覆盖个别变量”，这容易出错：
- CSS优先级规则下，
:root { --c: red }会被<div style="--c: blue">覆盖——但仅限该div及其继承链 - 如果子组件用了
color: var(--c)，它取的是离它最近的生效声明，不是:root那个 -
className="theme-dark"若只定义了.theme-dark { --c: green }，而你又在子元素上写style={{ '--c': 'blue' }}，后者会赢，但仅对这个元素有效
结论：别混用策略。要么全走:root + className切换（适合主题级变更），要么全走style内联（适合局部动态色值），否则变量作用域会混乱。
服务端渲染（SSR）时CSS变量的坑
Next.js或Remix等框架中，初始HTML由服务端生成，此时useState还没运行，style对象是空或默认值。用户看到首屏可能是未应用变量的状态，造成闪烁。
解决思路有限：
- 用
useEffect在客户端首次挂载后立即注入变量（但会有短暂闪动） - 把变量逻辑提到
getServerSideProps或generateStaticParams里，通过props传入初始style对象（仅适用于可预判的变量） - 放弃SSR变量动态性，改用CSS类名切换（如
data-theme="dark"+ 属性选择器）
没有银弹。变量本质是客户端运行时能力，硬塞进SSR流程总会妥协。
最常被忽略的是：CSS变量值如果是函数返回（比如getContrastColor(theme)），务必保证该函数在服务端也能安全执行，否则会报错或产生无效字符串。
