React中设置CSS变量最常用方式是通过style属性在JSX中内联声明，如style={{'--button-bg': '#ff6b6b'}}，需用--前缀、字符串值，变量名区分大小写，适用于实例级定制；全局设置则用document.documentElement.style.setProperty，配合useEffect管理生命周期与清理。
直接在 JSX 中设置 CSS 变量（最常用）
React 组件里改 CSS 变量，最直接的方式是用 style 属性写内联变量，适用于组件实例级定制（比如某个按钮要临时变色）。
注意：必须用 -- 前缀，且值要字符串化；var() 是消费端语法，不能在这里用。
style={{ '--button-bg': '#ff6b6b', '--button-color': 'white' }}- 变量名区分大小写，
--ButtonBg和--button-bg是两个不同变量 - 避免在循环渲染中频繁设置大量变量——会触发重排，影响性能
通过 document.documentElement.style.setProperty 动态设全局变量
适合主题切换、用户偏好持久化等跨组件场景。修改后所有用 var(--xxx) 的地方自动响应。
常见错误是漏掉 useEffect 清理或重复执行，导致变量残留或覆盖失败。
立即学习“前端免费学习笔记（深入）”；
- 在
useEffect里调用document.documentElement.style.setProperty('--theme-color', 'indigo') - 如果主题切换频繁，建议封装成自定义 Hook，比如
useTheme，内部处理 cleanup（如保存上次值、恢复默认） - 别在组件首次渲染前就调用 ——
document.documentElement在 SSR 环境下可能为null，需加判断
在 SCSS 模块中消费 CSS 变量（配合 React + CSS Modules）
这是复用组件时安全定制样式的主流做法，尤其当你用 .module.scss 且需要控制 :hover、::before 这类伪元素时。
关键不是“怎么设”，而是“怎么让组件内部样式能读到你设的值”——靠 var(--xxx, fallback) 提供回退，靠作用域继承保证生效。
- 组件 SCSS 中写：
color: var(--_btn-text-color, #333);，其中--_btn-text-color是约定的私有接口名 - 外部传入时，要么在父容器上设
style={{ '--_btn-text-color': 'red' }}，要么用 class 触发预设主题（如.theme-red { --_btn-text-color: red; }） - 别把变量名起成
--color这种泛义名——容易和第三方库冲突，推荐带组件前缀，如--my-button-color
为什么不能用 className 直接覆盖深层嵌套样式？
这个问题常被误认为是“CSS 变量没生效”，实际是 CSS Modules 的哈希类名机制导致外部选择器失效。
例如你在 Header.module.scss 里写了 .navButton:hover，编译后变成 .navButton__abc123:hover；而你在外部 custom.css 里写的 .header .navButton:hover 根本匹配不上这个哈希名。
- 外部 class 只能影响组件最外层容器，无法穿透进子元素的局部作用域
- 试图用
!important强行覆盖不仅脆弱，还会破坏 SCSS 模块的设计契约 - CSS 变量方案绕开了选择器匹配问题——只要变量能继承到目标元素，样式就生效
--x，和没写它一样。 
