Vue3+TypeScript学习笔记（二十九）

由于scope的存在，每个HTML标签会被标上唯一的属性，有时我们想修改标签就会变成以下这种情况：element-ui里有一个el-input__wrapper，它默认是白色的，现在我要把它改成红色，于是很自然地想到添加样式

直接添加样式

/* lang=scss可以去掉 */
<style scoped lang="scss">
// 使用deep进行样式穿透
.el-input__wrapper {
  background-color: red;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

但这样做存在一些问题问题：
①scoped会在样式尾部加上一个唯一的属性，css会变成类似于.el-input__wrapper[data-v-7a7a37b1]这样的属性，无法起到实际作用，但我们又不想把scoped去掉。
②即使直接去掉scoped也不起作用，此时样式会被element-ui中原有的样式覆盖，同样起不到作用

于是，Vue提供了:deep()样式穿透用于移动[[data-v-7a7a37b1]这样的属性的位置，并将类移动到element-ui原有的类下方实现覆盖(注意，:deep()只能在添加scoped的情况下使用，若style标签中没有scoped，:deep()将不起作用)

使用:deep()样式穿透

<style scoped lang="scss">
// 使用deep进行样式穿透
:deep(.el-input__wrapper) {
    background-color: red;
}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

如果样式是嵌套的，可以使用:deep()防止样式没有命中对应的类。下面这个例子如果不加:deep()类名会变成.ipt .el-inout__inner[data-v-7a7a37b1]，加上后会被修改为.ipt[data-v-7a7a37b1] .el-inout__inner，如此一来就可以命中样式了

防止错误命中

<style scoped lang="scss">
.ipt {
  width:300px;
  margin:100px 400px;
  :deep(.el-input__inner){
    background:'red';
  }
}
</style>

        

          
        
        
        

          

          AI 代码解读