Vue样式穿透

应用场景

Vue组件中写样式,通常如下方代码:

<style scoped>
  .page .data {
    color: red;
  }
</style>

因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,因为最终生成出来的样式选择器是这样的:

.page .data[data-v-98cf4d84] ,

所以这个data样式只会对含有 data-v-98cf4d84 属性的HTML元素生效。

但是如果这个data样式,是在某个第三方组件当中的,

这个组件的class就是data,

没有 data-v-98cf4d84 属性,

这时候我们这么写样式是无法生效的,所以就需要用到样式穿透,

将[data-v-98cf4d84]选择器去除,同时只对当前组件生效, 避免影响其他组件。

样式穿透

1. css 使用 >>>

<style lang="css" scoped>
  .page >>> .data {
    color: red;
  }
</style>

2. scss 使用 /deep/ 或者 ::v-deep

<style lang="scss" scoped>
  .page {
    /deep/  .data {
    	color: red;
  	}
  }
</style>

/deep/在某些情况下无法生效,可以切换为::v-deep

<style lang="scss" scoped>
  .page {
    ::v-deep .data {
    	color: red;
  	}
  }
</style>

使用样式穿透以后,生成出来的css样式如下:

.page[data-v-98cf4d84] .data,

编译器将[data-v-98cf4d84]放到了上一个标签选择器上面,

由此data样式只会对.page[data-v-98cf4d84]下的HTML元素生效,

即完成了对class为data的HTML元素设置样式,又保证了不影响范围之外的data元素。