React中应使用import './Button.module.css'启用CSS Modules实现样式局部作用域，类名自动哈希避免全局污染；需通过styles.xxx引用，禁用硬编码类名，配合clsx处理条件样式。
React里怎么让CSS只作用于当前组件
直接用 import './Button.module.css'，而不是 import './Button.css'。Webpack 或 Vite 默认识别 .module.css 后缀为 CSS Modules，会自动做局部作用域处理——类名被哈希重命名，不会污染全局。
常见错误现象：样式明明写在 Button.css 里，结果其他组件的 button 也变样了；或者用了 className="primary"，但全局已有同名类，样式被覆盖或叠加。
- 必须用
.module.css（或.module.scss等）后缀，否则不启用模块化 - 导入后得到的是一个对象，比如
{ primary: 'Button_primary__abc123' }，要通过styles.primary使用 - 不能在 HTML 字符串模板或
dangerouslySetInnerHTML中硬写类名，哈希名不可预测
CSS Modules中如何写全局类或复用样式
局部样式是默认行为，但有些场景确实需要穿透或共享，比如重置某些第三方库的样式、或定义设计系统基础类。
使用 :global() 包裹即可声明全局作用域：
/* Button.module.css */
:global(.reset-button) {
margin: 0;
padding: 0;
}
.root {
color: blue;
}
注意：只有 :global() 内部的类名和选择器才全局生效，.root 仍是局部的。
-
:global()不能嵌套在局部类里，比如.container :global(.icon)是合法的，但.container { :global(.icon) { ... } }不合法 - 想复用变量或混合（如主题色），推荐配合
postcss-preset-env或 CSS 自定义属性，而非依赖全局 class - 如果大量用
:global()，说明可能该抽成独立的base.css并单独引入，别塞进模块文件
为什么 className={styles.xxx} 在热更新时偶尔失效
本质是 CSS Modules 的哈希名在 HMR（热模块替换）过程中没同步更新，尤其在修改了父组件的样式导入顺序或条件导入逻辑时容易触发。
典型表现：改完 Button.module.css 后，页面没变，控制台也没报错，但新类名没上到 DOM 上。
- 检查是否误用了
require('./Button.module.css')—— 动态 require 会破坏 HMR 链路，坚持用import - Vite 用户注意：若启用了
css.modules.localsConvention: 'camelCaseOnly'，但写了class-name这种横线命名，会导致styles.class-name访问不到（应写成styles.className） - Webpack 用户确认
css-loader版本 ≥ 6，并配置了modules: { auto: true }，避免手动开关出错
要不要用 clsx 或 classnames 配合 CSS Modules
要，而且很值得。CSS Modules 输出的是对象，不是字符串，直接拼接 className={styles.a + ' ' + styles.b} 会丢掉哈希后缀，变成无效类名。
正确做法是用 clsx 处理对象键：
import styles from './Button.module.css';
import clsx from 'clsx';
<p>function Button({ variant, disabled }) {
return (
<button classname="{clsx(" styles.button variant="==" styles.primary disabled styles.disabled>
Click me</button></p>
);
}
-
clsx能安全处理undefined、false、对象值，比手写三元更稳 - 不要用
Object.values(styles).join(' ')—— 会把所有类都加进去，包括你没用到的 - 如果项目已用
tailwindcss，且只是简单条件切换，有时直接内联className="... {variant === 'primary' ? 'bg-blue-500' : 'bg-gray-300'}"更轻量，不必强求全走 Modules
CSS Modules 的核心约束其实就一条：类名永远不直接写死在 JSX 里，必须经由 import 得到的对象访问。漏掉这个，后面所有调试都在绕弯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
