样式穿透

应用场景

• Vue组件中写样式，通常如下方代码：

<style scoped>
  .comA .data {
     background: red;
  }
</style>

• 因为关键字scoped的原因,style标签内的样式只会对当前组件内容生效,因为最终生成出来的样式选择器是这样的:
• .comA .data[data-x-xx-xxxxxx]
• 所以这个data样式只会对含有 data-x-xx-xxxxxx 属性的HTML元素生效。
• 但是如果这个data样式,是在某个第三方组件当中的,这个组件的class就是data,
• 没有 data-v-xxxxxxxx 属性, 这时候我们这么写样式是无法生效的,所以就需要用到样式穿透.

样式穿透

1. css 使用 >>>

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

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

// 父元素 /deep/ 子元素
<style lang="scss" scoped>
  .comA {
    /deep/  .data {
    	color: red;
  	}
  }
</style>

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

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