官方的说法是:
如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符。
我的使用方法(chart是import进来的组件,内部有picture_header的class):
<tempelate>
<chart class="aaa">
</chart>
</tempelate>
<style scoped>
.aaa >>> .picture_header {
background-color: red !important;
}
</style>
按理说编译出来的css应该是
.aaa[data-v-f3f3eg9] .picture_header { /* ... */ }
但我看到的却是
.aaa >>> .picture_header[data-v-f3f3eg9] { /* ... */ }
就是说深度选择器并没有被正确解析,chart中的picture_header类确实也没有改变背景颜色。请问是为什么?
还有个小问题,就是要改变引入组件的样式,是不是都要加important,才能把原有的样式覆盖掉?