import './button.css' 造成全局污染，因其本质是将样式注入全局标签，浏览器按标准css规则匹配所有class="button"元素；webpack/vite默认启用css-loader但未开启modules: true，类名不重命名，故devtools中可见原始类名而非哈希名。
为什么 import './Button.css' 还是全局污染？
因为 import './Button.css' 本质是把 CSS 注入全局 <style></style> 标签，浏览器按标准 CSS 规则匹配所有 class="button" 元素——和组件在哪、JSX 怎么写完全无关。Webpack/Vite 默认对 .css 启用 css-loader，但不开启 modules: true，所以类名不会重命名。
验证方式：打开 DevTools 查看元素 class 属性。如果看到原始 button 而不是类似 Button_button__Kx2f1 的哈希名，说明 CSS Modules 根本没启用。
- Webpack 项目需在
css-loader配置中显式设置modules: true - Vite 项目默认只识别
.module.css，写成Button.css就永远是全局 - Umi 项目可通过
cssModulesWithAffix: true改为用.css后缀启用模块化
Button.module.css 不生效的三个硬伤
styles.button 渲染为空字符串，不是 React 报错，是构建阶段压根没生成 styles 对象。根本原因就三件事没对齐：
- 文件后缀必须是
.module.css（或.module.scss，但需配sass-loader+css-loader?modules） -
import styles from './Button.module.css'路径大小写必须完全一致（macOS/Linux 下button.module.css≠Button.module.css） - 不能在
dangerouslySetInnerHTML里硬写class="button"——模块类名只存在于 JS 对象中，不会自动注入全局样式表
动态 className 写成 ${styles[variant]} 为啥是 undefined？
styles[variant] 是运行时取值，但 CSS Modules 的类名映射在构建期就固定了。variant 值（比如 "large"）若没在 .module.css 文件里明确定义为类名，styles.large 就是 undefined，不是空字符串。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
别拼字符串：className={`${styles.button} ${styles[variant]}` 会渲染出 class="Button_button__xxx undefined"。
- 安全写法：用可选链或默认值，例如
className={`${styles.button} ${styles[variant] ?? ''}` - 更稳妥：提前校验
variant是否在Object.keys(styles)中 - 避免依赖运行时拼接——CSS Modules 的类名是编译期确定的
:global() 不是逃生舱，乱用反而扩大污染面
:global() 是唯一能“逃逸”模块作用域的方式，但边界必须清晰：
- ✅ 正确场景：
:global(.ant-modal) { z-index: 9999; }（覆盖第三方库）、:global(*) { box-sizing: border-box; }（重置基础样式） - ❌ 错误场景：把整个组件样式包进
:global()；在子组件里用它去“修复”父组件没导出的类名；当成 BEM 命名的替代方案 - ⚠️ 注意：
@import './reset.css'进模块文件，导入的仍是全局 CSS，等价于直接写:global()
哈希类名每次构建都变不是 bug，是设计使然——改一行 CSS 或挪动文件位置都会触发变化。真正容易被忽略的是：构建配置、文件后缀、路径大小写这三者只要一个错，整个隔离机制就失效，而且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
