React中直接import CSS文件会导致样式污染，因为Webpack或Vite将其编译为全局style标签，同名类名互相覆盖；启用CSS Modules需改文件名为.module.css并用对象解构引入，生成唯一哈希类名实现隔离。
React中直接import CSS文件为什么会导致样式污染
因为默认情况下，Webpack（或Vite）把 import './Button.css' 编译成全局注入的 <style> 标签，所有同名类名（比如 .container、.btn）会互相覆盖。组件A改了 .btn 的背景色，组件B的按钮也跟着变——这不是按需，是“全量泄漏”。
常见现象包括：
• 热更新后样式突然错乱
• 两个不同组件里都写了 .title，但只生效一个
• 测试环境正常，上线后第三方UI库样式被覆盖
如何启用CSS Modules（以Create React App为例）
CRA 默认支持，只需改文件名：把 Button.css 改成 Button.module.css，然后在组件中用对象解构方式引入：
import styles from './Button.module.css';
function Button() {
return <button className={styles.btn}>Click</button>;
}
Webpack 会自动把 styles.btn 编译成类似 Button_btn__kx9f2 的唯一哈希类名，彻底隔离。
立即学习“前端免费学习笔记（深入）”；
关键点：
• 文件名必须含 .module.css（或 .module.scss 等）
• import 的变量名随意，但必须是对象解构用法，不能直接 import './Button.module.css'
• 不支持 @import 外部CSS文件（会丢失模块化）
怎么在CSS Modules里写嵌套、伪类和动画
CSS Modules本身不处理语法，它只是加前缀；真正解析嵌套/伪类靠预处理器（如Sass）或PostCSS插件。但写法有约束：
✅ 正确写法（Sass + CSS Modules）：
.btn {<br> &:hover { color: blue; }<br> &--primary { background: #007bff; }<br>}
⚠️ 容易踩的坑：
• :global(.header) 用于主动退出模块化，但滥用会导致污染
• 动画名（@keyframes spin）默认仍是全局的，需手动加 :local(spin) 包裹
• composes 可复用其他模块的类，但跨文件时路径要写对：composes: btn from './BaseButton.module.css';
要不要用 className={styles['btn-primary']} 这种写法
要，但只在动态拼接类名时才需要。比如根据props切换样式：
const buttonClass = `${styles.btn} ${props.primary ? styles['btn-primary'] : styles['btn-default']}`;
注意：
• styles.btn-primary 是非法JS标识符，必须用方括号
• 不推荐用 classNames 库做字符串拼接，CSS Modules原生已支持对象形式：className={clsx(styles.btn, {[styles['btn-primary']: props.primary})}
• 如果大量条件类名，建议拆成独立模块（如 ButtonVariants.module.css），而非堆在一个文件里
最常被忽略的一点：CSS Modules生成的类名哈希依赖于文件路径+类名，所以重命名文件或移动目录会导致哈希变化——缓存失效，但不会出错；而如果手写 !important 或内联 style，反而会绕过模块化机制，让隔离失效。
