第三方组件样式覆盖问题本质是作用域失控，正确解法是用 wrapper block 局部限定：将第三方组件包在自有 Block 内，CSS 仅作用于 wrapper 类，不直接修改其内部类名，且 modifier 需显式声明、类名须静态可预测。
第三方组件样式覆盖问题，本质不是 BEM 失效，而是你试图用全局选择器去“打补丁”。直接改 .ant-btn 或加 !important 看似快，实则埋下升级崩塌、调试失焦、多人协作冲突的隐患。唯一可控路径是：不碰第三方类名，只控制它的容器。
为什么不能给第三方类名加项目前缀？
硬加前缀（如把 .el-input__inner 改成 .myapp-el-input__inner）会破坏库内部的选择器链：
-
.el-input.is-focus .el-input__inner这类运行时动态生成的规则完全匹配失败 -
.el-select__popper是 JS 动态插入的浮层，前缀一加，所有弹出样式丢失 - 每次 UI 库升级，类名微调（比如从
ant-btn-primary变成ant-btn--primary），你的前缀就得全量重对 - Webpack CSS Modules 或 Vue
<style scoped>下，.myapp-ant-btn根本不会出现在 DOM 中——第三方组件自己没写这个 class
wrapper block 必须怎么写才真正生效？
Wrapper 不是加个 class 就完事，关键在 HTML 结构和 CSS 书写方式：
- HTML 中必须用独立容器包裹：
<div class="search-form__date-picker"><ADatePicker /></div>，而不是<ADatePicker className="search-form__date-picker" /> - CSS 中必须带空格层级：
.search-form__date-picker .ant-picker-input input，不是.search-form__date-picker.ant-picker-input（后者是复合类名，永远不匹配） - modifier 组合必须显式声明：
.search-form__date-picker--compact要单独定义 padding / font-size，不能靠父级.search-form--compact .ant-picker-input推导——Portal 模式下第三方组件可能脱离该父级渲染 - Vue
<style scoped>下，若需穿透到子组件内部，必须用:deep(.ant-picker-input)，且只能写一次，嵌套:deep()无效
属性选择器作为 wrapper 备选时的硬约束
当 wrapper 不可用（如全局 $message、Notification），只能用属性选择器轻量拦截，但必须守住三条线：
立即学习“前端免费学习笔记（深入）”；
- 限定作用域：
.myapp-ui [class^="ant-"]✅，裸写[class^="ant-"]❌（会误伤content、plant等含 ant 字符的类） - 用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），精度差一个数量级 - Webpack css-loader 开启
modules: true时，对应 CSS 文件顶部必须加注释：/* webpackMode: "global" */；Vue<style scoped>下必须改用<style module>或显式写:global([class^="ant-"]) { }
CSS 加载顺序比选择器写法更致命
很多开发者写了 :deep(.ant-btn) 还是盖不过去，根本原因不是语法错，而是引入顺序反了：
- Vite / Webpack 项目中，第三方 CSS（如
element-plus/dist/index.css）必须在你项目样式之前import - 检查
main.ts或入口文件：如果先import './style/index.css'再import 'element-plus/dist/index.css'，你的规则永远排在后面，!important也白搭 - 哪怕用了
.my-block:deep(.el-button)，如果 Ant Design 的 CSS 是通过插件自动注入且加载优先级更高，照样失效 - 真正难处理的，从来不是怎么写选择器，而是谁先加载、谁后生效、谁控制了最终渲染节点的
class列表——这些细节一旦错位，BEM 再规范也救不回来
