CSS变量与React内联样式互补：变量管可复用、主题化、响应式切换的静态值，内联样式管组件实例级动态逻辑；硬编码style值阻碍维护和主题切换，而CSS变量一处修改全局生效，支持暗色模式、SSR一致性及DevTools调试。
CSS变量 + React 内联样式不是对立关系，而是互补组合：用 CSS 变量接管可复用、可主题化、需响应式切换的样式值，内联样式只负责真正动态、组件实例级的控制逻辑。
为什么直接在 style 里写死值会拖慢维护和主题切换
每次改主色调或间距，都要全局搜索 style={{ color: '#007bff' }} 或 padding: '16px' —— 这类硬编码值散落在 JSX 中，无法被 CSS 预处理器、构建工具或浏览器原生机制统一管理。更麻烦的是，useMediaQuery 或暗色模式切换时，你得手动同步所有相关 style 对象，极易漏掉或写错。
用 CSS 变量后，只需改一处 :root 声明，所有引用它的元素（包括通过 style 动态读取的）自动更新。
- 避免重复定义颜色/尺寸/动画时长等常量
- 支持浏览器原生暗色模式监听（
prefers-color-scheme） - 服务端渲染（SSR）时也能保持变量一致性（只要
<html>标签上有对应 class 或 style） - 调试时可在 DevTools 的 Computed 面板直接看到变量展开值，比查 JS 对象更直观
如何从 style 安全过渡到 CSS 变量驱动
核心原则：不替换所有内联样式，只抽离「稳定但可能批量变更」的部分。例如按钮背景色、卡片圆角、文字行高 —— 这些不该由每个组件自己决定，而应来自设计系统。
立即学习“前端免费学习笔记（深入）”；
操作步骤：
- 在
:root或主题 class 下定义变量，如--color-primary: #007bff;、--space-md: 16px; - 在组件中用
getComputedStyle(document.documentElement).getPropertyValue('--color-primary')读取（注意 trim()） - 把读取结果塞进
style对象，例如style={{ backgroundColor: primaryColor, padding: `${spaceMd}` }} - 需要响应式或主题切换时，在
useEffect里监听matchMedia或 class 变化，并触发重读变量（不要自己缓存，用getComputedStyle即可）
示例：
function Button({ variant }) {
const root = document.documentElement;
const primary = getComputedStyle(root).getPropertyValue('--color-primary').trim();
const bg = variant === 'primary' ? primary : 'transparent';
return <button style={{ backgroundColor: bg }}>Click</button>;
}
容易踩的坑：变量未生效、读取为空、性能抖动
CSS 变量在 style 中读取失败，90% 是因为以下原因：
-
document.documentElement在 SSR 环境下为undefined，必须加typeof window !== 'undefined'判断 - 变量名拼错或漏了双横线，比如写成
color-primary而非--color-primary，getPropertyValue返回空字符串 - 在
useEffect外直接读取，导致首次渲染时变量还没注入（尤其用 CSS-in-JS 库注入变量时） - 高频触发读取（如 scroll、resize 回调里反复调用
getComputedStyle），造成 layout thrashing —— 应节流或仅在必要时读
安全做法：封装一个 useCssVar Hook，内部处理存在性判断、默认值 fallback 和依赖更新逻辑，而不是每次手写 getComputedStyle。
什么时候仍该坚持用纯 style 对象
CSS 变量不是万能胶。以下场景，直接用 style 更清晰、更可控：
- 基于 props 实时计算的尺寸，如
width: `${percent}%`、transform: `translateX(${offset}px)` - 动画关键帧中需逐帧更新的属性（CSS 变量虽支持动画，但兼容性和性能不如原生 transform / opacity）
- 第三方组件要求传入 style 对象，且你不掌控其内部是否支持 CSS 变量（比如某些图表库）
- 临时调试用的高亮边框：
style={{ outline: '2px solid red' }}，没必要为它建变量
真正的高效，不是消灭内联样式，而是让 CSS 变量管「静态契约」，让 style 管「动态契约」—— 二者边界清晰，才不会在重构时互相撕扯。
