第三方CSS库样式污染源于CSS无作用域，解决方案是用CSS Modules等工具隔离作用域，但需注意@font-face、动态style、Shadow DOM等绕过机制。
第三方CSS库为什么总把你的样式搞乱
因为它们默认把类名扔进全局作用域，button、modal、container 这些名字一撞就炸。你改一个 .btn，整个页面的按钮全变样；引入 antd 后，自己的 .header 突然加了 margin——不是你写的，是它偷偷塞的。
常见错误现象：Unexpected margin collapse、Button color overridden by antd、开发者工具里看到多个同名类同时生效但来源不明。
根本原因不是库写得差，而是 CSS 天然没有作用域。解决思路不是禁用第三方库，而是「围起来」：让它的样式只在该出现的地方生效，不溢出。
CSS Modules 怎么封住第三方样式
CSS Modules 不是魔法，它只是把类名自动哈希化，并限制作用域。关键点在于：它只作用于你明确 import 的那个文件，对 node_modules 里的 CSS 默认不处理。
立即学习“前端免费学习笔记（深入）”；
所以不能直接 import 'antd/dist/reset.css' 就完事——那还是全局的。得绕一道：
- 用
css-loader配置modules: { auto: true }（Webpack 5+），让它识别.module.css后缀 - 把第三方 CSS 拷贝一份到项目里，重命名为
antd-reset.module.css，再import './antd-reset.module.css' - 或者用
postcss-import+postcss-modules在构建时注入并作用域化（适合 PostCSS 用户）
注意：像 normalize.css 这类重置样式必须全局生效，不该封装；而 antd 或 tailwindcss 的组件类（如 .ant-btn）才需要隔离。
遇到 :global() 和嵌套第三方类怎么办
第三方库常依赖特定 DOM 结构和类名组合，比如 .ant-modal .ant-modal-header。如果你把外层 .ant-modal 封进了模块作用域，内层选择器就找不到目标了。
这时必须用 :global() 显式放行：
.my-modal-wrapper :global(.ant-modal) {
width: 600px;
}
:global(.ant-modal) :global(.ant-modal-body) {
padding: 24px;
}
但别滥用：:global(.*) 会重新打开污染口子。只对真正需要穿透的第三方类名做白名单放行，且优先用最窄的选择器路径（比如 :global(.ant-input) 而不是 :global(*)）。
另一个坑：某些库（如 react-datepicker）动态插入 DOM 到 document.body，你的模块样式根本覆盖不到——得配合 !important 或提级到全局 CSS 文件中微调。
为什么有时候 CSS Modules 也压不住污染
因为污染不止来自类名，还来自：
-
@font-face、@keyframes这些规则天生全局，CSS Modules 对它们无效 - 第三方库用 JS 动态写
style标签或内联style属性（比如emotion的 css-prop），这类样式完全绕过 CSS 文件链 - 你用了
!important写了自己的样式，结果第三方库也用!important，谁后加载谁赢
这时候得切到更底层：用 Shadow DOM（适合 Web Components 场景）、或用 scoped + Vue SFC、或干脆在构建时用 postcss-prefix-selector 给第三方类加前缀——但代价是维护成本陡增。
真正容易被忽略的是：CSS Modules 只管“你写的 CSS”，不管“第三方怎么挂载”。它能拦住类名冲突，拦不住 DOM 插入点失控、拦不住 CSS-in-JS 的 runtime 注入、拦不住浏览器原生样式表的 cascade 顺序。要干净，得从加载时机、挂载位置、优先级三处一起卡。
