本文介绍一种比直接传递 classname 更可靠、可维护性更强的方案：利用 css 自定义属性（css variables）配合 scss 默认值，实现组件内嵌样式的动态覆盖，尤其适用于 hover、focus 等伪类状态的定制。
在 React + SCSS 项目中，我们常希望通过 className prop 复用同一组件（如
根本问题在于：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 组件库的关键实践之一。
