CSS Modules 是响应式组件中解决全局样式污染最稳妥的方案，因其构建时生成可预测哈希类名，天然支持 SSR、动态挂载及第三方库共存场景，而 scoped 依赖运行时属性注入，在弹窗插入 body、SSR hydration、跨框架集成等情况下易失效。
直接说结论：CSS Modules 是响应式组件中解决全局样式污染最稳妥的方案，scoped（如 Vue 的 <style scoped>）在跨框架、SSR 或动态插入 DOM 场景下容易失效，不推荐用于需要强隔离的响应式组件。
为什么 CSS Modules 比 scoped 更适合响应式组件
响应式组件常涉及动态挂载（比如弹窗插入 document.body）、服务端渲染（SSR）、或与第三方库（如 Ant Design、react-datepicker）共存。这些场景下，scoped 依赖属性选择器（如 data-v-f3f57f）模拟作用域，但：
- 动态插入到
body的节点不会自动带上 scope 属性，样式直接丢失 - SSR 时服务端生成的 scope ID 与客户端不一致，触发 hydration mismatch
- 无法安全穿透作用域去定制第三方组件内部结构（
:deep()行为不稳定，且 Vue 3 中已弃用） - CSS Modules 的哈希类名是构建时确定的字符串，天然可序列化、可预测、可 debug
如何让 CSS Modules 在响应式组件中真正生效
常见“写了 .module.css 但样式没变”问题，90% 出在构建配置或导入方式上：
- 文件后缀必须是
.module.css（不是.css、.scss，除非你额外配了modules: true给 scss-loader） - Webpack 中不能把
modules: true写在/\.css$/全局规则里，否则会把normalize.css也模块化——正确写法是test: /\.module\.css$/或启用modules: { auto: true } - Vite 用户检查
vite.config.ts是否显式设了css: { modules: false }，删掉即可 - Next.js app 目录中，
import styles from './Component.module.css'只能在"use client"组件里执行；Server Component 中 import 会报Module not found - React 中必须用
className={styles.button}，写成className="button"就等于没用 CSS Modules
怎么安全定制第三方组件（如 AntD Select）的样式
响应式组件经常要微调 UI 库的外观，但直接覆盖 .ant-select 会污染全局。正确做法是组合使用 :global() 和局部容器：
立即学习“前端免费学习笔记（深入）”；
- 给第三方组件外层套一个带模块类名的容器：
<div className={styles.selectWrapper}><Select /></div> - 在
.module.css中用:global()精准穿透，只影响该容器内的第三方节点：.selectWrapper :global(.ant-select-selector) { border-color: #1890ff !important; } .selectWrapper :global(.ant-select-dropdown) { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } - 避免写
:global(.ant-select)这种宽泛选择器，更不要:global(*)—— 它等于主动放弃隔离 - 如果第三方组件动态渲染到
body（如Tooltip、Modal），需配合getPopupContainer把挂载点收回到模块容器内，再用:global()控制
动态类名拼接和响应式断点怎么写
CSS Modules 支持媒体查询原生语法，但不支持基于 props 动态生成类名（比如 color={theme}）。应对响应式场景的实操建议：
- 媒体查询直接写在
.module.css里，它会被正常编译并保留：.button { padding: 8px 16px; } @media (min-width: 768px) { .button { padding: 12px 24px; } } - 需要条件 class 时，用
clsx或模板字符串：className={clsx(styles.button, isActive && styles.active, isLarge && styles.large)} - 主题变量用 CSS 自定义属性（
:root或组件级style={{ '--primary': theme.color }}），然后在.module.css中引用：background-color: var(--primary); - 别用
composes（已被 webpack css-loader 弃用），跨文件复用样式改用 CSS 变量或 JS 导出常量
最容易被忽略的一点：CSS Modules 的隔离只发生在类名层面。如果你在 .module.css 里写了 body { background: red } 或 @font-face，它依然会全局生效——这类规则必须放在非模块化的 CSS 文件里统一管理。
