.ant-btn 在 .module.css 中直接写不生效，因 CSS Modules 会哈希化类名并限制作用域，而 ant-btn 是 Ant Design 自身定义的全局类名；需用 :global(.ant-btn) 完整包裹选择器才能生效。
为什么 .ant-btn 在 .module.css 里直接写不生效
因为 CSS Modules 默认把所有类名哈希化并限制作用域，.ant-btn 是 Ant Design 在它自己的 CSS 文件里定义的原始类名，根本不在你的 .module.css 文件中。你写的 .ant-btn { color: red } 会被编译成类似 .MyComponent_module__ant-btn___xyz123 这样的名字，而 DOM 元素上只有 ant-btn，浏览器自然找不到匹配。
:global() 的写法必须完整包裹选择器结构
常见错误是只包类名、拆开写或嵌套在局部作用域里：
-
:global(.ant-modal .ant-modal-header)✅ 正确：整个选择器路径被声明为全局 -
.my-wrapper :global(.ant-modal)❌ 错误：:global()不能嵌在局部选择器内部 -
:global(.ant-modal) .ant-modal-header❌ 错误：后半段又掉回模块作用域，找不到目标元素 -
:global( .ant-tabs-tab { background: red; } )❌ 错误：语法非法，{}不能出现在括号内
动态挂载到 document.body 的组件样式覆盖更难
像 Modal、Tooltip、DatePicker 这类组件，DOM 节点被 JS 插入到 body 底下，完全脱离你的 React 树。此时即使用了 :global()，也常因加载顺序或作用域链断裂而失效。
- 确保自定义
:global()规则所在的.module.css文件，在入口或 Layout 层提前import，不要等子组件才引入 - 仍无效？退一步：把覆盖规则挪到普通
index.css（非 module），并保证它在组件库 CSS 之后加载 - 极端情况需加
!important，但仅限单属性，且要写在:global()规则内部，如:global(.ant-modal) { z-index: 10000 !important; }
权重不够时别硬刚 !important，先看 DevTools 里的真实选择器
第三方库常用多层嵌套提升优先级，比如 .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 类属性一旦漏掉，弹窗就可能被遮住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
