通常使用深度作用选择器 >>>  或 /deep/  或 ::v-deep 可以实现样式穿透，达到父组件修改子组件的样式的目的。

  • 推荐使用 ::v-deep，因为它更保险并且编译速度更快
  • /deep/  和 ::v-deep 都是​​>>>​​ 的别名，
  • Sass 、scss之类的预处理器无法正确解析​​>>>​​
  • vue3.0使用/deep/时，编译会报错
  • 只在第一层子组件的样式前加深度作用选择器

例如父组件中有如下子组件

<child class="markdown-body"/>
需修改子组件中的样式
.markdown-body .highlight pre, .markdown-body pre{
   background-color: #23241f;
}

 此时 markdown-body 就是父组件中的样式，.highlight pre 和 pre 才是子组件中的样式，所以正确样式穿透方法如下：

.markdown-body  /deep/ .highlight pre, .markdown-body  /deep/ pre {
    background-color: red;
}

若子组件内还有子组件，层层嵌套，也只在第一层子组件上加 /deep/ 即可，不要每一层都加！