前言

前段时间，写一个轮播图组件的时候遇到了一个样式不生效的问题，通过样式穿透解决了，记录一下。

对于 vue 文件中的 <style> 标签，加上 scoped 属性，它的 css 样式只能用于当前的组件，它的原理的是通过使用 PostCSS 来实现转换

scoped 转换规则

  • 组件的根元素、组件自身的后代元素、子组件的根元素都会加上该组件特定的 data-v-x 属性。
  • css 样式中，最后一个选择器会被添加上 data-v-xxx 属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Father.vue */
<template>
  <div class="father-wrapper">
    <div class="inner">father-inner</div>
    <child-cmp></child-cmp>
  </div>
</template>
<style scoped>
.father-wrapper {
  border: 1px solid;
}
.father-wrapper .inner {
  font-size: 20px;
}
.father-wrapper .child-wrapper .inner-1 {
  font-size: 20px;
}
</style>
1
2
3
4
5
6
7
/* Child.vue */
<template>
  <div class="child-wrapper">
    <div class="inner-1">child-inner-1</div>
    <div class="inner-2">child-inner-2</div>
  </div>
</template>

转换后的代码：

转换后的HMTL

转换后的CSS

样式穿透规则

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符( /deep/ 或 ::v-deep 操作符)

1
2
3
4
5
<style scoped>
.a >>> .b {
  /* ... */
}
</style>
1
2
3
.a[data-v-f3f3eg9] .b {
  /* ... */
}

可以看到使用了 >>> 操作符，属性选择器不会被加到 >>> 后的选择器上，这就方便我们操作样式

1
2
3
4
5
<style scoped>
.father-wrapper .child-wrapper >>> .inner-1 {
  color: lightblue;
}
</style>

使用>>>之后转换后的css

用途： 当我们使用一些第三方的组件库的时候，对于某些样式不满意并且套的层次比较深的时候，我们可以使用样式穿透来改变样式。

参考资料：