本文介绍一种比直接传递 classname 更可靠、可维护性更强的方案：利用 css 自定义属性（css variables）配合 scss 默认值，实现组件内嵌样式的动态覆盖，尤其适用于 hover、focus 等伪类状态的定制。
在 react + SCSS 项目中，我们常希望通过 className prop 复用同一组件（如
），并在不同页面赋予其差异化视觉表现。但正如实践中所见，单纯将外部样式类名（如 styles.header）传入根元素，无法穿透作用域影响子元素的伪类行为（如 :hover）——这是因为 CSS Modules 的局部化机制会重命名 .navButton:hover 为类似 .navButton__abc123:hover，而外部 SCSS 文件中定义的 .header .navButton:hover 无法匹配该哈希类名，导致样式失效。
根本问题在于：CSS Modules 的作用域隔离与嵌套样式覆盖存在天然冲突。强行绕过（例如使用 :global() 或 :deep()）会破坏封装性，增加样式污染风险。更专业的解法是：将可变样式抽象为 CSS 自定义属性，并在组件 SCSS 中声明默认值和应用逻辑。
以下是在 Header.module.scss 中推荐的实现方式：
// Header.module.scss $header-primary-color: #096208; $header-primary-contrast: #fff; $header-primary-light: #000; .header { // 声明私有变量（带下划线前缀，避免意外暴露） --_nav-item-color: var(--nav-item-color, #{$header-primary-color}); --_nav-item-background: var(--nav-item-background, #{$header-primary-contrast}); --_nav-item-hover-color: var(--nav-item-hover-color, #{$header-primary-light}); --_nav-item-hover-background: var(--nav-item-hover-background, #{$header-primary-contrast}); .navBar { // ... 其他基础样式 } .navButtons { // ... 布局样式 } .navButton { color: var(--_nav-item-color); background: var(--_nav-item-background); border: none; font-size: 1rem; font-weight: 600; padding: 0.5rem 1rem; cursor: pointer; transition: color 0.2s, background-color 0.2s; &:hover { color: var(--_nav-item-hover-color); background: var(--_nav-item-hover-background); } } }在调用端（如 LearnPage.tsx），只需定义轻量级覆盖类，无需关心深层结构：
立即学习“前端免费学习笔记（深入）”；
// learn.module.scss .special-header { --nav-item-hover-color: black; --nav-item-color: #1a5c1a; }// LearnPage.tsx import styles from './learn.module.scss'; import { Header } from './Header'; export const LearnPage = () => ( ✅ 优势总结：
- 完全兼容 CSS Modules：不破坏作用域，无全局污染；
- 支持所有伪类与动画：:hover, :focus, @keyframes 均可基于变量驱动；
- 类型友好 & 易于文档化：可在组件 Props 文档中明确列出支持的 –xxx 变量；
- 零运行时开销：纯编译时 CSS，无需 js 动态注入或 styled-components 运行时；
- 渐进增强：后续新增定制项（如 –nav-button-border-radius）只需扩展变量声明，调用方保持兼容。
⚠️ 注意事项：
- 避免在变量名中使用 !important —— CSS 变量本身不具备优先级，应通过声明顺序控制；
- 若需响应式变量（如不同断点下不同 hover 色），可结合 @media 与 :root 或组件根节点重设；
- 在 typescript 中，可通过 data-* 属性或 JSDoc 注释显式标注支持的 CSS 变量，提升团队协作效率。
这种基于 CSS 变量的设计模式，将「样式定制权」从“外部强制覆盖”转向“内部契约式扩展”，是构建高复用、易维护 ui 组件库的关键实践之一。