样式穿透

何时使用样式穿透？
• 修改第三方组件库的样式；
• 修改其他组件的私有样式（其样式使用了 scoped 属性）。

一、样式穿透的实现方式
从兼容低版本的视角看。
• >>>：
o 适用于 css、less 和 stylus。
o 语法：外层容器 >>> 组件 { }，例如：#app >>> el-button {}。
• /deep/：
o 适用于 scss 和 less。
o 语法：外层容器 /deep/ 组件 { }，例如：.main /deep/ el-button {}
• ::v-deep：适用于 scss 和 less。
o 适用于 scss 和 less。
o 语法：外层容器 ::v-deep 组件 { }，例如：.main ::v-deep el-button {}

二、不同的 css 预处理语言适用的样式穿透方案
从兼容低版本的视角看。
• CSS：推荐使用 >>>。
• Less：推荐使用 /deep/ 或 ::v-deep。
• Sass/Scss：推荐使用 /deep/ 或 ::v-deep。

三、注意事项
• 操作符 >>> 可能会因为 “无法将 CSS 预处理语言 编译成 CSS” 而报错，可以尝试使用 /deep/ 或 ::v-deep来解决。
• vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep。

https://www.cnblogs.com/huangtq/p/15572343.html