根本原因是全局css作用域——.button在浏览器中全局唯一，导致组件间样式穿透覆盖；css modules需配置loader、正确命名文件、用styles.xxx引入，且类名须合法（如btn-primary需styles['btn-primary']）。
React里样式冲突到底怎么发生的
根本原因不是类名重复，而是全局CSS作用域——你写的 .button 和第三方库的 .button 在浏览器里是同一个东西。哪怕组件完全隔离，CSS照样穿透、覆盖、打架。
常见错误现象：Button 组件在A页面正常，在B页面颜色/间距突然变了；热更新后样式错乱；测试环境样式正常，上线后失效。
- React本身不处理CSS作用域，
import './Button.css'就是把规则扔进全局样式表 - 用
className="button"不等于“这个button只属于Button组件”，只是挂了个字符串 - CSS Modules不是魔法，它靠构建时重命名类名来隔离，前提是你的打包工具（如webpack）配置了对应loader
启用CSS Modules必须改的三处地方
光写 Button.module.css 文件名没用，不配loader，它就当普通CSS加载，照样全局污染。
以webpack为例（Create React App已默认启用，但自建项目常漏）：
立即学习“前端免费学习笔记（深入）”；
- loader配置中必须匹配
/\.module\.css$/，不能只写/\.css$/ -
modules选项要设为{ auto: true }或true，否则不触发类名哈希 - JSX里引入方式必须是
import styles from './Button.module.css'，不能用import './Button.module.css'
否则你会看到控制台报错：Module not found: Can't resolve './Button.module.css'，或者更隐蔽的问题：样式生效了，但类名没变，冲突照旧。
styles.xxx 为什么有时是undefined
这是运行时最常见的坑——不是代码写错了，是CSS Modules对类名合法性有硬性要求。
- 类名不能以数字开头，比如
1col→styles.1col语法错误，得写成_1col或col1 - 含连字符的类名（如
btn-primary）必须用方括号访问：styles['btn-primary']，不能写styles.btn-primary（会被解析成减法） - 如果CSS文件里写了注释或空行太多，某些老版本css-loader会解析失败，导致整个
styles对象为空
示例：
.btn-primary { color: blue; }
.disabled-state { opacity: 0.5; }对应JS里必须写 className={styles['btn-primary']} 和 className={styles.disabledState}（注意连字符自动转驼峰，但仅限无前缀情况）。
和CSS-in-JS、Tailwind比，CSS Modules卡在哪
它不解决动态样式、主题切换、服务端渲染的CSS提取顺序问题，也不是万能解药。
- 没法直接用变量控制颜色：
color: { theme.color }这种写法不支持，得靠CSS自定义属性或额外封装 - 全局重置（如
*, *::before, *::after）不能放进.module.css，否则会被重命名失效，必须另放普通CSS文件 - 和
@import混用时，被导入的文件不会被模块化，除非它自己也叫xxx.module.css - 如果团队同时用CSS Modules和传统CSS，很容易忘记哪个该用
styles.xxx，哪个该写死字符串，维护成本悄悄上升
真正难的不是启用，是决定哪些样式该模块化、哪些该抽成设计系统级的全局token——这一步没人替你判断。
