直接在.module.css里写.ant-btn不生效是因为CSS Modules会哈希化类名，而antd的.ant-btn是运行时注入的原始类名；需用:global(.ant-btn)正确穿透作用域。
为什么直接在 .module.css 里写 .ant-btn 永远不生效
因为 CSS Modules 默认把所有类名哈希化并限制作用域，.ant-btn 是 antd 在运行时注入的原始类名，根本不在你的模块文件里定义。你写的 .ant-btn { color: red } 实际被编译成类似 .MyComponent_module__ant-btn___xyz12，浏览器找不到这个类——目标元素上只有 ant-btn。
:global() 的写法必须严格匹配选择器结构
不是“包住类名就行”，而是要把整个目标选择器完整塞进 :global() 括号里，且不能嵌套在局部作用域内：
- ✅ 正确：
:global(.ant-modal .ant-modal-header) { padding: 16px; } - ❌ 错误：
.my-wrapper :global(.ant-modal)——:global不能出现在局部选择器内部 - ❌ 错误：
:global(.ant-modal) .ant-modal-header—— 后半段又掉回模块作用域，找不到 - ❌ 错误：
:global( .ant-tabs-tab { background: red; } )——{}不能放在括号里，语法非法
动态挂载到 document.body 的组件（如 Modal、Tooltip）怎么覆盖样式
这类组件 DOM 节点脱离 React 树，即使用了 :global()，也可能因加载顺序或作用域链断裂而失效：
- 提前在入口文件或 Layout 层
import你的.module.css，别等到子组件才引入 - 仍无效？退一步：把覆盖规则挪到普通
index.css（非 module），并确保它在 antd 的 CSS 之后加载 - 极端情况需加
!important，但只限单属性，且必须写在:global()规则内部，例如：:global(.ant-modal) { z-index: 10000 !important; } - 权重不够时，别硬刚
!important，先打开 DevTools → Elements → 找到目标元素 → 看 Styles 面板里哪条被划掉，复制它的完整选择器路径（比如.ant-tabs-nav .ant-tabs-tab-active），粘贴进你的:global()规则里
什么时候不该用 :global()，以及更隐蔽的坑
真正难处理的不是语法，而是判断“该不该穿透”：
立即学习“前端免费学习笔记（深入）”；
- 像
normalize.css或重置样式，必须全局，:global合理；但antd的按钮尺寸可以局部微调，z-index和position类属性一旦改错，就可能引发遮挡或定位异常 - 避免
:global(*)或:global([class*="ant-"])—— 宽泛匹配等于放弃模块化初衷，后续维护成本陡增 - 第三方库样式往往用多层嵌套提升优先级（如
.ant-btn-primary:hover::before），你只写:global(.ant-btn-primary)很可能被覆盖
最常被忽略的一点：CSS Modules 的 :global() 不是万能胶，它只是绕过哈希化，不解决加载时序和 DOM 插入位置带来的作用域断裂问题。动辄加 !important 或盲目扩大匹配范围，反而让样式依赖变得更脆弱。
