老师你好，为什么这节课里修改组件样式不用穿透呢

Question

这节课里对状态元素设置了高度，是在父组件写的样式，使用到了两个子组件内部的class。我记得我之前遇到组件样式不符合这里的要求，需要自定义的时候，要使用/deep/做个样式穿透才可以搞定的，为什么在这里不需要穿透了呢？是Vue3的不需要样式穿透了吗？

Answer 1

张轩 2021-01-17 09:35:50

同学你好 子组件内部的 class 是不会改变的，如果你在 子组件内部添加了 scoped 样式，它是通过 data 节点另外添加的样式。 比如

<style scoped lang="less">    
.example
{        
   color:red;    
 }
</style>
<template>    
    <div class="example">
    scoped测试案例
    </div>
</template>

会转换成
.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

是不会影响原来的 class 名称的

• 提问者 qq_我在时光机里找回忆 #1

  感谢老师，我明白为什么要使用穿透了。
  之前没看清楚，以为class的名字会加后缀，原来class是不变的啊。
  虽然class不变，但是里面的选择器会被加上一个属性选择器，这样就比原来的选择器优先级更高一点。所以像原来那样写优先级就不够了，无法覆盖样式，只能用穿透。
  而这节课里面子组件并没有写样式声明，所以直接用类选择器就可以了