变量重写是可持续覆盖第三方UI库样式的唯一路径，需在@import前声明全局变量、避免!important和选择器覆盖，配合wrapper容器控制作用域，并严格规范::v-deep使用。
用变量重写代替选择器覆盖，是唯一可持续路径
SCSS里想“覆盖”第三方UI库样式，靠写.my-form .el-input .el-input__inner加!important不是在解决问题，是在给未来埋雷。Element Plus、Ant Design、MUI这些库都提供了完整的 Sass 变量体系，它们的设计初衷就是让你改变量，而不是硬碰硬地提权重。
关键点在于：变量必须在@import或@use之前声明，且不能放在<style scoped>里——那些地方的变量不参与全局主题编译。
- Element UI：新建
element-variables.scss，第一行写$--color-primary: #1890ff;，第二行才@import "~element-ui/packages/theme-chalk/src/index" - Element Plus（Dart Sass 1.23+）：改用
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("primary": ("base": #990066))) - 避免双短横线解析问题：旧版 sass-loader 对
$--xxx支持不稳定，可改用$__color_primary，效果一致
::v-deep只用于局部穿透，且格式容错率为零
Vue 的 scoped 样式下，::v-deep是目前最稳定的选择器穿透机制，但它不是“写上去就生效”的万能符——它对空格、缩进、嵌套位置极度敏感。
- ✅ 正确：
::v-deep .el-button（顶层、无缩进、空格紧接） - ❌ 错误：
::v-deep(.el-button)（被解析为伪类函数调用） - ❌ 错误：
.form-wrapper ::v-deep .el-button（嵌套后生成的选择器带了 scope 属性前缀，但目标 DOM 没有） - Teleport 类组件（如
<el-dialog>）已脱离当前组件树，::v-deep完全失效，必须提至全局样式文件或改用:global(.el-dialog)
Wrapper block 是唯一真正可控的边界控制方式
你永远无法保证第三方组件内部结构不变，但你能确保自己包裹它的容器始终存在。与其赌.ant-btn-primary会不会变成.ant-btn-filled，不如把按钮放进.search-form__trigger里，所有样式只作用于这个 wrapper。
立即学习“前端免费学习笔记（深入）”；
- CSS 写：
.search-form__trigger { padding: 0 16px; }，不写.search-form__trigger .ant-btn - 要调内部输入框？必须带 wrapper 前缀：
.search-form__field:deep(.ant-input)（Vue）或.search-form__field [class^="ant-input"]（通用） - modifier 必须显式声明：
.search-form__trigger--compact，不能依赖父级.search-form--compact推导——Portal 或 Teleport 下它可能根本不在那个 DOM 节点里 - 遇到哈希化类名（如
css-1a2b3c），别硬猜，用属性选择器：[class*="button"]或走官方主题 API（如 MUI 的createTheme）
@layer 和 @scope 不是救命稻草，现阶段慎用
@layer 确实能按层管理优先级，@scope 也已在 Chrome 119+ 支持，但它们解决的是“谁该赢”的问题，而不是“谁该管”的问题。当前真实项目中，你更大概率会遇到：
-
@layer被构建工具（如 Vite + sass-plugin）忽略，最终没生成分层逻辑 -
@scope在 Safari / Firefox 中尚无支持，无法落地 - Shadow DOM 隔离虽彻底，但多数 UI 库（如 Element Plus）不原生支持，强行封装会导致事件丢失、focus 失效、无障碍退化
- 真正影响交付节奏的，从来不是“能不能用新语法”，而是“改完后下周升级库，样式还崩不崩”
所以别等浏览器支持齐了再动手——wrapper + 变量重写 + 严格限制::v-deep使用范围，这三者组合才是今天就能上线、明天还能维护的方案。
