Vue样式穿透

Vue样式穿透

vue文件的style标签的scoped属性作用：PostCSS在元素标签上添加特殊属性值，在样式的选择器后面添加属性选择器，实现了组件样式的私有化，防止组件之间的样式污染（比如相同类名的元素）。

但在使用scoped属性时，会遇到样式问题。需要使用样式穿透解决

scoped原理

ParentComponent.vue文件
<template>
  <div>
    <p class="parent">父组件</p>
    <ChildComponent></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
  components: {
    ChildComponent,
  },
};
</script>
<style scoped lang="less">
.parent{
  color: red;
  font-size: 20px;
}
</style>

在父组件的style标签中启用了scoped属性后，可以看到父组件的所有元素都添加了相同的特殊属性，同时在子组件的根元素上也有（只有子组件的根元素才有，其他没有，这里注意到子组件的p标签并没有）。
.parent选择器也变成了.parent[data-v-xxx]，也就是添加了属性选择器。

遇到问题

使用第三方组件库的组件时，时常需要调整子组件内部的样式。加上scoped属性后，发现无法使子组件内部标签选择器的样式生效。

举例：
现在我想通过.child p选择器，选择子组件中的p元素，调整样式，这时是没有效果的

ParentComponent.vue文件
<template>
  <div>
    <p>父组件</p>
    <ChildComponent class="child"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
  components: {
    ChildComponent,
  },
};
</script>
<style scoped lang="less">
.child p {
  color: red;
  font-size: 20px;
}
</style>

可以看到，这时的选择器变成了.child p[data-v-xxx]，属性选择器加到了p后面，但是在图一我们看到子组件的p标签是没有特殊属性的，所以这时样式没有生效。
通过样式穿透，可以解决这个问题。

解决方案：样式穿透

vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。

• css 使用 >>>
• less 使用 /deep/
• scss 使用 ::v-deep

ParentComponent.vue文件
<style scoped lang="less">
.child /deep/ p {
  color: red;
  font-size: 20px;
}
</style>

可以看到，/deep/放在谁的后面，属性选择器就加在哪个选择器的后面。图中显示这时属性选择器在.child选择器后面，选择器这时筛选过滤出来的是“具有.child类名和具有[data-v-xxx]属性的元素的所有子元素中的p元素”，效果符合预期。