问题
我修改了一个组件库子组件的样式。
<style lang='scss' scoped>
.el-tabs__item {
@apply bg-red-200;
}
</style>
结果啥都不起作用,但我修改了我自己写的div就可以。为啥
原因
因为有这个 作用域保护 。所以系统会给每一个标签都加上一个独有的属性(子组件也被视为一个标签),即 data-v-52722512,此时你的代码被系统改变后看起来是这样。
<style lang='scss' scoped>
.el-tabs__item[data-v-52722512]{
@apply bg-red-200;
}
</style>
页面变成了这样:
然而我们的这个类对应的这个标签,是在子组件里面的,然后这个又在父组件里面找,当然找不到啦
作用域保护 不会对子组件下的标签加属性,只会给当前的组件所有标签加属性
解决
如果是
<style lang='scss' scoped>
[data-v-52722512] .el-tabs__item{
background:green;
}
</style>
这样就能有颜色了。
所以我们希望 vue 能给我们生成这样的样式。
此时要用 deep 函数。
<style lang='scss' scoped>
:deep(.el-tabs__item){
@apply bg-red-200;
}
</style>
这样就改过来啦
参考文章:后盾人编程