直接写 .ant-btn 在 .module.css 中不生效，因 css modules 会将类名哈希化并作用域隔离，.ant-btn 被编译为如 .mycomponent_button__abc123，而 dom 元素仍为原始 ant-btn；必须用 :global(.ant-btn) 全局声明且括号内包裹完整选择器（含伪类、嵌套结构），否则后半段会掉回局部作用域失效。
直接写 .ant-btn 在 .module.css 里根本不会生效
CSS Modules 默认会对所有类名哈希化并限制作用域，你写的 .ant-btn 实际被编译成类似 .MyComponent_button__abc123 这样的名字，而 DOM 元素上只有原始的 ant-btn 类——浏览器根本找不到这个新类名。
:global() 的括号里必须塞完整选择器，不能只包类名
常见错误写法：.my-wrapper :global(.ant-btn) 或 :global(.ant-btn) .ant-btn-text。前者把 :global() 套在局部作用域内，后者后半段又掉回模块作用域，都找不到目标元素。
- ✅ 正确：
:global(.ant-modal .ant-modal-header) { padding: 16px; } - ❌ 错误：
:global(.ant-modal) .ant-modal-header（后半段失效） - ❌ 错误：
.modal-wrap :global(.ant-btn)（:global()不能嵌套在局部选择器下）
动态挂载到 document.body 的组件样式容易丢失
Ant Design 的 Modal、Tooltip，或 react-datepicker 等组件，JS 会把 DOM 插入到 body 底下，完全脱离你的组件树。即使用了 :global()，也可能因加载顺序靠后或作用域链断裂而无效。
- 确保含
:global()规则的.module.css在入口文件或 Layout 层提前import，不要等子组件才引入 - 仍不生效？退一步：把覆盖规则挪到普通
index.css（非 module），并确认它在 UI 库 CSS 之后加载 - 极端情况可加
!important，但必须写在:global()规则内部，如:global(.ant-modal) { z-index: 10000 !important; }
第三方库的嵌套结构和伪类必须连写，不能拆开
比如你想覆盖 .ant-tabs-tab-active:hover，不能写成 :global(.ant-tabs-tab-active):hover——:hover 会被当成局部类处理，实际编译后变成 .xxx__hover___xyz，根本匹配不到。
- ✅ 正确：
:global(.ant-tabs-tab-active:hover) - ✅ 正确：
#my-app :global(.ant-btn-primary:focus::before)（ID +:global()+ 完整伪类链） - ❌ 错误：
:global(.ant-btn):focus（:focus脱离:global作用域）
z-index、position、font-family）一旦漏掉，弹窗就可能被遮住或文字错位；而有些（如按钮内边距）改了反而破坏库自身的状态逻辑。得先看 DevTools 的 Styles 面板，确认哪条规则被划掉、来自哪个文件，再决定是复制完整路径，还是换 wrapper 隔离。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
