《style scope》 css作用域保护如何修改（组件库）子组件的样式

庚辰腊七木头鱼

已于 2022-08-09 15:11:45 修改

阅读量344

点赞数

文章标签： vue.js javascript 前端

于 2022-08-03 14:05:24 首次发布

本文链接：https://blog.csdn.net/weixin_46235143/article/details/126139150

版权

问题

我修改了一个组件库子组件的样式。

<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>

这样就改过来啦
参考文章：后盾人编程

关注