CSS 样式穿透 • 汇总

前言

何时使用样式穿透？

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

一、样式穿透的实现方式

从兼容低版本的视角看。

• >>>：
  • 适用于 css、less 和 stylus。
  • 语法：外层容器 >>> 组件 { }，例如：#app >>> el-button {}。
• /deep/：
  • 适用于 scss 和 less。
  • 语法：外层容器 /deep/ 组件 { }，例如：.main /deep/ el-button {}
• ::v-deep：适用于 scss 和 less。
  • 适用于 scss 和 less。
  • 语法：外层容器 ::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。

【参考文章】
CSS 样式穿透的三种方式