CSS Modules 是一种构建时转换方案，将类名重命名为带哈希的唯一标识并导出映射对象，需通过 import 的对象动态引用类名（如 styles.button），不可写死字符串；支持组合、条件切换，并可配合 clsx 等库使用；全局样式需用 :global() 显式声明或单独引入。
在 JavaScript 项目中使用 CSS Modules，核心是让每个 CSS 文件的作用域默认局部化，避免全局样式污染，同时支持在 JS 中以对象形式动态引用类名。
CSS Modules 是什么
CSS Modules 不是官方标准，而是一种构建时的转换方案（通常由 Webpack、Vite 等工具支持）。它会将你写的类名（如 .button）自动重命名为带哈希的唯一标识（如 Button_button__abc123），并导出一个 JS 对象映射原始类名到实际类名。
例如，Button.module.css：
.button {
padding: 8px 16px;
background: #007bff;
}
.primary {
background: #0056b3;
}
在 JS 中导入后变成：
import styles from './Button.module.css';
// styles = { button: 'Button_button__abc123', primary: 'Button_primary__def456' }
如何在 JS 中正确使用 CSS Modules 类名
不能直接写死类名字符串，必须通过导入的对象取值。否则样式不会生效或发生冲突。
- ✅ 正确：用 styles.button 获取编译后的类名
- ❌ 错误：写 className="button"（找不到对应样式）
- ✅ 支持组合：className={`${styles.button} ${styles.primary}`}
- ✅ 支持条件切换：className={isActive ? styles.active : styles.inactive}
与 React 组件配合的典型写法
在函数组件中，推荐结合 clsx 或 classnames 库简化多类名拼接逻辑：
import styles from './Button.module.css';
import clsx from 'clsx';
function Button({ variant = 'default', children }) {
return (
<button classname="{clsx(styles.button," variant="==" styles.primary>
{children}
</button>
);
}
这样既保持可读性，又确保所有类名都经过 CSS Modules 处理。
注意作用域和全局样式的混合使用
CSS Modules 默认只作用于本地类名，但有时仍需引入全局样式（如重置、字体、工具类）：
- 用 :global(.reset) 显式声明全局类
- 单独建 global.css 并用 import './global.css' 全局注入
- 慎用 composes 继承其他模块类（已逐渐被 CSS-in-JS 或现代方案替代）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
