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

Question

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

Answer 1

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<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不变，但是里面的选择器会被加上一个属性选择器，这样就比原来的选择器优先级更高一点。所以像原来那样写优先级就不够了，无法覆盖样式，只能用穿透。
  而这节课里面子组件并没有写样式声明，所以直接用类选择器就可以了