:global() 必须包裹完整选择器且不能嵌套局部选择器，否则失效；动态挂载组件样式需提前引入CSS文件或退至全局CSS；优先用主题变量而非滥用!important。
:global() 的正确写法和常见失效原因
直接在 .module.css 里写 .ant-btn 覆盖第三方样式，几乎必然失效——因为 CSS Modules 会把所有类名哈希化，而 .ant-btn 是组件库原始类名，根本不在你的模块作用域内。真正有效的穿透方式是 :global()，但它有严格语法约束：
-
:global()必须包裹完整选择器，包括点号、空格、嵌套结构，不能只包类名；例如:global(.ant-modal .ant-modal-header)✅，而.my-wrapper :global(.ant-modal)❌（局部作用域内嵌:global无效） -
:global()后不能再接局部选择器；例如:global(.ant-tabs-tab) .ant-tabs-tab-active❌——后半段又掉回模块作用域，找不到目标元素 -
:global( .ant-btn { color: red; } )是非法语法，{}不能塞进括号里
动态挂载组件（如 Modal/Tooltip）的样式覆盖难点
Ant Design 的 Modal、DatePicker 或 Tooltip 默认把 DOM 插入到 document.body，完全脱离你组件的 React 树。此时即使用了 :global()，也常因加载顺序或作用域链断裂而失效。
- 确保
:global()所在的.module.css文件，在入口文件（如main.tsx或App.tsx）中提前import，不要等到子组件才引入 - 若仍不生效，退一步：把覆盖规则挪到普通
index.css（非 module），并确认它在组件库 CSS 之后加载（比如在index.html中<link>放在组件库之后，或构建配置中保证 import 顺序） - 极端情况需加
!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-"])这类宽泛匹配——等于放弃模块化初衷，后续维护成本陡增
真正难处理的不是语法，而是“该不该穿透”
不是所有样式都适合用 :global() 覆盖。比如 normalize.css 必须全局，但 antd 的按钮尺寸可以局部微调；而 z-index 和 position 类属性一旦漏掉，弹窗就可能被遮住。
立即学习“前端免费学习笔记（深入）”；
判断依据只有一个：这个样式是否影响跨组件行为？如果只改颜色、边距，尽量走组件库提供的主题变量或 props；只有当涉及布局穿透、DOM 挂载位置、全局容器（如 body）时，才动用 :global()。
