CSS Modules 中直接写 .ant-btn 无效，因其被哈希化而 DOM 仍为原始类名；须用 :global(.ant-btn) 声明全局作用域，并确保提前引入；推荐容器前缀限定+复用组件库语义类提升权重，避免 !important。
直接用 .ant-btn 或 .el-button 写样式基本无效——不是你写错了，是类名没进你的作用域，或权重压不过组件库原生规则。
为什么 .ant-btn 在 .module.css 里不生效
CSS Modules 会把所有你写的类名哈希化，但 .ant-btn 是第三方库在 HTML 里硬写的字符串，它根本不在你的模块文件中定义。你写的 .ant-btn { color: red } 实际被编译成类似 .MyButton_module__ant-btn___xyz12，而 DOM 上只有原始的 ant-btn，浏览器自然找不到。
- 必须用
:global(.ant-btn)把选择器声明为全局作用域 -
:global()要包裹完整选择器，不能只包类名：:global(.ant-modal .ant-modal-header)✅，.my-wrapper :global(.ant-modal)❌ - 如果组件挂载到
document.body（如 Modal、Tooltip），:global()规则必须提前 import，比如在入口index.css或 Layout 层，否则加载顺序晚于组件库 CSS，照样被盖掉
怎么让选择器权重自然胜出，而不是靠 !important
第三方库常用多层嵌套提升权重（比如 .ant-btn-primary:hover::before），你只写单个类很难赢。真正稳定的做法是复用它自己暴露的语义类，组合出更高特异性。
- 优先写
.el-button.el-button--primary.my-submit，而不是只写.my-submit—— 权重从 10 升到 20，天然压制库内默认规则 - 用
:where()控制权重分配：.my-form :where(.ant-btn)[disabled]让.ant-btn部分权重归零，整体只靠.my-form贡献 0-1-0，避免和库内高权重规则硬碰 - 禁用
!important堆叠：它会让后续任何微调都必须加更多!important，DevTools 里也难定位来源
容器类前缀 + 局部限定才是安全路径
BEM 的核心不是命名规范，而是作用域控制。你不该试图“覆盖” .ant-btn，而应把它包在你自己的块里，样式只作用于容器及其后代。
立即学习“前端免费学习笔记（深入）”；
- HTML 中写：
<div class="search-form__trigger"><Button /></div>，而不是给Button直接加className="search-form__trigger" - CSS 中只写：
.search-form__trigger { padding: 0 16px; }，不写.search-form__trigger .ant-btn或.ant-btn.search-form__trigger - 真要调内部输入框？必须带容器前缀：
.search-form__field:deep(.ant-input)（Vue）或.search-form__field [class^="ant-input"]（通用）
最常被忽略的一点：哪怕写了 wrapper，构建工具（如 CSS Modules 或 Vite 的 scoped style）可能把类名哈希化，导致 DevTools 里看不到原始类名；而弹窗类组件（如 Modal）生成的 DOM 又脱离 React 树，变量和局部样式全失效——这时候你得手动给挂载节点加容器类，或退到 :global() + 全局 CSS 文件里写规则。
