CSS Modules 中直接写 .ant-btn 不生效，因其类名被哈希化且作用域受限；需用 :global(.ant-btn) 全局覆盖，注意语法正确、加载顺序及选择器权重。
为什么直接写 .ant-btn 在 .module.css 里不生效
因为 CSS Modules 默认把所有类名哈希化并限制作用域，.ant-btn 这种第三方库原生类名根本不在你的模块文件里定义，它只是你 HTML 中的一个字符串。你写的 .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 的组件怎么覆盖
像 antd 的 Modal、Tooltip 或 react-datepicker 这类组件，JS 会把 DOM 插入到 body 底下，完全脱离你组件的 React 树。此时即使用了 :global()，样式也因加载顺序或作用域链断裂而失效。
- 确保自定义
:global()样式所在的.module.css文件，在入口或 Layout 层提前import，不要等到子组件才引入 - 如果仍无效，退一步：把覆盖规则挪到普通
index.css（非 module），并保证它在组件库 CSS 之后加载 - 极端情况需配合
!important，但仅限单属性，且要加在:global()规则内部，如：:global(.ant-modal) { z-index: 10000 !important; }
权重不够时别硬刚 !important，先看选择器结构
第三方库样式往往用多层嵌套提升优先级，比如 .ant-btn-primary:hover::before。你只写 :global(.ant-btn-primary) 很可能被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements → 找到目标元素 → 看 Styles 面板里哪条被划掉，点进去确认来源是否是组件库 CSS
- 复制它的完整选择器路径（比如
.ant-tabs-nav .ant-tabs-tab-active），粘贴进你的:global()规则里 - 避免用
:global(*)或:global([class*="ant-"])，这类宽泛匹配等于放弃模块化初衷，后续维护成本陡增
normalize.css 必须全局，antd 的按钮尺寸可以局部微调，但 z-index 和 position 类属性一旦漏掉，弹窗就可能被遮住。这些细节不会报错，但上线后第一眼就能发现。 
