必须用:global()包裹完整选择器（如:global(.ant-modal .ant-modal-header)），且确保其所在文件在组件库css之后加载；否则css modules会将.ant-btn等第三方类名错误哈希化，导致样式不生效。
为什么 .ant-btn 在 .module.css 里写无效
不是你选择器写错了，而是 CSS Modules 把所有你写的类名（包括 .ant-btn）当成“本模块定义的类”去哈希化。结果编译出来可能是 .MyComp_module__ant-btn___xyz12，而 DOM 上只有原始的 ant-btn —— 浏览器根本找不到这个类。
必须用 :global()，但语法和位置很关键
:global() 是唯一能让你的规则匹配第三方原始类名的机制，但它有硬性约束：
-
:global()必须包裹完整选择器，比如:global(.ant-modal .ant-modal-header)✅；不能只包一部分，比如.my-wrapper :global(.ant-modal)❌ -
:global()规则所在的文件，必须在组件库 CSS 加载之后、相关组件挂载之前被 import。Modal/Tooltip 这类挂到document.body的组件，:global()样式得提前写在入口index.css或 Layout 层，否则加载顺序晚于 antd 自身 CSS，直接被盖掉 - 不要写
:global(*)或:global([class*="ant-"])—— 这等于放弃模块化，后续维护成本爆炸
权重不够时别堆 !important，先看真实选择器结构
第三方库常用嵌套提升权重，比如 .ant-btn-primary:hover::before（特异性 0,0,3,1）。你只写 :global(.ant-btn-primary)（0,0,1,0）肯定压不住。
- 打开 DevTools → Elements → 找到目标元素 → 看 Styles 面板里哪条规则被划掉 → 点进去确认来源是哪个文件 → 复制它的完整选择器路径，粘贴进你的
:global()规则里 - 优先复用它自己暴露的语义类组合，比如
:global(.search-form__trigger .ant-btn-primary)，靠容器前缀自然提权，比单写:global(.ant-btn-primary)更稳 - 真要用
!important，只限单个属性且必须写在:global()内部，比如:global(.ant-modal) { z-index: 10000 !important; }
最常被忽略的一点：构建工具没配对启用 CSS Modules
光把文件改成 .module.css、写了 import styles from './X.module.css' 不够。Webpack/Vite 必须识别后缀并启用模块化处理：
- Webpack 5+ 默认不开启 CSS Modules，需显式配置
modules: { mode: 'local' } - 如果用了 Sass，确保
css-loader在sass-loader之后执行，顺序错会导致模块化完全失效 - Vite 用户注意：
composes在 Vite 4.3+ 才稳定支持，旧版本会静默忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
