根本解法是用 wrapper block 局部限定作用域：将第三方组件包在自有 block 内，css 仅作用于 wrapper 类，不直接修改其内部类名，且 modifier 需显式声明、类名须静态可预测。
第三方组件样式覆盖困难，根本不是你写得不够狠，而是你总在错误的层面上硬刚——直接改它的类名、加 !important、堆选择器深度，这些做法要么短期失效，要么埋下升级雷。真正可控的路径只有一条：不碰它内部结构，只管好你自己的边界。
用 wrapper block 局部限定作用域
这是最稳定、最符合 BEM 原则的做法。你不该试图覆盖 .ant-btn，而应把整个按钮包进你自己的容器里，样式只作用于这个容器本身。
- HTML 中写：
<div class="search-form__trigger"><button></button></div>，而不是给Button直接传className="search-form__trigger" - CSS 只写：
.search-form__trigger { padding: 0 16px; }，不写.search-form__trigger .ant-btn或.ant-btn.search-form__trigger - 真要调内部输入框内边距？必须带 wrapper 前缀：
.search-form__field:deep(.ant-input)（Vue）或.search-form__field [class^="ant-input"]（通用 CSS） - modifier 必须显式声明：
.search-form__trigger--compact，不能依赖父级.search-form--compact推导——Portal 模式下它可能根本不在那个父级里
提升选择器权重，而非滥用 !important
!important 是临时止血贴，不是创可贴。它会让后续所有微调都变成“谁写得更晚谁赢”的猜谜游戏，尤其当第三方组件自己也用了 !important 时，冲突直接升级。
- 优先提权：
.my-page .card .title（权重 0,0,2,0）稳压.title（0,0,1,0） - 用属性选择器更准：
button[type="submit"]（0,0,1,1）比单纯.btn高一级，且语义明确 - ID 选择器虽强（0,1,0,0），但 React/Vue 动态 ID 不稳定，慎用
-
:where()和:is()不增加权重，别指望靠它们提权；它们适合降权覆盖，比如:where(.my-app) .ant-tag让整条规则权重等同于.ant-tag
确认是否被 Shadow DOM 或内联样式拦截
很多“覆盖失败”根本不是权重问题，而是样式压根没进渲染树——Shadow DOM 封闭了外部 CSS，内联样式天生高于一切。
- 右键检查元素，看是否有
#shadow-root (open)节点；有就说明普通 CSS 选不到里面的内容 - 支持
part属性的组件（如<input part="input">），可用::part(input)精准样式化 - 内联样式（
style="color: red"）优先级高于所有外部 CSS，包括!important；此时只能用 JS 改element.style.color或setAttribute('style', '...') - 某些 UI 库（如 MUI）会哈希化类名（
css-1a2b3c），硬写原始类名必然失效；改用[class*="button"]或走官方主题 API（如createTheme）
CSS Modules 下第三方样式加载错位
CSS Modules 默认跳过 node_modules 中的 CSS 文件，导致 Ant Design、Bootstrap 这类依赖全局类名的库样式“有类无样”。
- 不要在
.module.css里用:global(.ant-btn)做局部覆盖——它只能覆盖颜色等单点，无法恢复完整样式集 - 正确做法是分离构建路径：新建
src/index.css，里面只放@import 'antd/dist/reset.css';，确保它走传统全局流程 - Vite 用户检查是否误启了
css.modules.generateScopedName全局规则，导致node_modules路径也被匹配；需加preprocessorOptions条件过滤 - Modal/Tooltip 等浮层默认挂载到
document.body，脱离你组件的 DOM 结构；React 需传getPopupContainer={() => document.getElementById('app')}，Vue 需用<teleport to=".third-party-sandbox"></teleport>
最容易被忽略的一点：不是所有“不生效”都怪权重。先打开 DevTools 的「Computed」面板，看最终生效的值来自哪条规则、哪个文件、哪一行——再动手，不猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
