通常使用深度作用选择器 >>> 或 /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/ 即可,不要每一层都加!