vue样式穿透＞＞＞

Posted 2022-01-01 左直拳

穿透当前组件的样式范围，去设置父组件样式

今日忽然留意到VUE组件中，样式代码有个古怪的符号，三个大于号。

事实上，这个符号，是VUE的专用符号，用于CSS。目的是穿透当前组件，去设置父组件的样式。因为一般来说，组件的样式都有<style scoped>，将样式限定于当前组件。

比如，我想改iview里table组件的表头样式，就这样写：

<style scoped>
>>> .ivu-table-header th
    background-color: #ddd;

</style>

我没写这个符号前，怎么设置都不见效果。估计要设置这个table组件的默认样式，只能到上级去设置。话说，iview的table组件，居然没有提供方法设置表头，真不知道是怎么想的。

＞＞＞用在原生的css。如果用的是sass,scss,less，可以使用 ::v-deep。本来/deep/等同于::v-deep，但vue-cli3可能不支持。

<style scoped>
/*编译前*/
.a >>> .b  
 color:blue

.a
 ::v-deep .b  
  color:blue
 
 
.a ::v-deep .b 
 color:blue


/*编译后*/
.a[data-v-fsdfg9] .b  color:blue
</style>

参考资料：
vue组件样式穿透/deep/ ::v-deep ＞＞＞区别