真正优雅的方式是让CSS变量与React逻辑对齐：定义在主题层、消费在组件层、更新由生命周期或上下文驱动；优先使用ThemeProvider+props.theme而非硬写var()，确保类型安全、可测试、无性能陷阱且兼容SSR。
直接用 getComputedStyle 读取 CSS 变量在 React 中容易出错、性能差、且无法响应式更新——这不是“优雅”，是临时补丁。真正优雅的方式，是让 CSS 变量和组件逻辑对齐：变量定义在主题层，消费在组件层，更新靠 React 生命周期或上下文驱动。
为什么不能在 styled 组件里硬写 var(--color-primary)
看似能用，但问题一堆：
- 失去 TypeScript 类型提示，
--color-primary拼错也不会报错 - 无法 fallback 到 JS 默认值（比如
var(--color-primary, #007bff)在插值中不生效） - 样式函数每次执行都触发
getComputedStyle，React 重渲染频繁时卡顿明显 - 暗色模式切换时，CSS 变量变了，但 styled 组件不会自动 re-evaluate —— 它只在创建时读一次
用 ThemeProvider + props.theme 替代直接读 CSS 变量
Styled-Components 自带主题系统，这才是它设计的原生路径。把 CSS 变量映射到 JS 对象，再透传下去：
import { ThemeProvider } from 'styled-components';
<p>const theme = {
colors: {
primary: '#007bff',
secondary: '#6c757d',
background: 'var(--bg-surface, #ffffff)',
},
spacing: {
sm: '0.5rem',
md: '1rem',
}
};</p><p>// 在根组件包裹
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
然后在 styled 组件里直接用：
立即学习“前端免费学习笔记（深入）”；
const Button = styled.button`
background: ${props => props.theme.colors.primary};
padding: ${props => props.theme.spacing.md};
color: ${props => props.disabled ? '#999' : 'white'};
`;
好处很实在：
- 类型安全：配合 TypeScript 接口，IDE 能自动补全
theme.colors.xxx - 可测试：theme 是纯对象，单元测试里直接 mock
- 可覆盖：子组件可传入局部
theme覆盖默认值，不用动全局 CSS - 无性能陷阱：不依赖 DOM 查询，纯 JS 计算
CSS Modules 里怎么安全用 CSS 变量
CSS Modules 本身不处理变量注入，但可以和 :root 或组件级 style 配合，关键是「控制作用域」：
- 全局变量只放设计系统级常量（如
--color-brand,--radius-md），定义在:root或global.css中 - 组件内变量用
--component-name-xxx命名，并在组件根元素上设置：<div className={styles.container} style={{ '--component-bg': props.bg || '#fff' }}> - 在
.module.css里用var(--component-bg, #fff)，fallback 保证降级可用
示例：
/* Header.module.css */
.header {
background: var(--header-bg, #f8f9fa);
color: var(--header-text, #212529);
}
JSX 中动态传入：
function Header({ variant }) {
const bg = variant === 'dark' ? '#343a40' : '#f8f9fa';
return <header className={styles.header} style={{ '--header-bg': bg }}>...</header>;
}
别忽略浏览器兼容性和 SSR 场景
CSS 变量在 IE 中完全不支持，而 Styled-Components 的 SSR 渲染时，getComputedStyle 不可用 —— 这意味着任何试图在服务端读取 CSS 变量的逻辑都会失败或返回空字符串。
所以：
- 如果项目需兼容 IE，所有变量逻辑必须降级为 JS 对象（theme）或内联 style
- SSR 项目里，避免在
useEffect外、组件初始化阶段调用getComputedStyle - 用
typeof window !== 'undefined'包裹 DOM 相关读取逻辑，否则 Next.js / Remix 构建会报错
最稳的路径始终是：变量定义 → JS 主题对象 → 组件消费。CSS 变量只作为最终落地层（比如暗色模式切换时批量更新 :root），而不是业务逻辑入口。
