携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

场景

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

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

然而我们的这个类对应的这个标签，是在子组件里面的，然后这个又在父组件里面找，当然找不到啦

作用域保护不会对子组件下的标签加属性，只会给当前组件的所有标签加属性

用 deep 函数即可

如果是

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

这样就改过来啦