vue样式穿透>>>
Posted 左直拳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue样式穿透>>>相关的知识,希望对你有一定的参考价值。
穿透当前组件的样式范围,去设置父组件样式
今日忽然留意到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样式穿透>>>的主要内容,如果未能解决你的问题,请参考以下文章