scoped下更改element组件的样式

vue中scoped的使用以及样式穿透

• 使用scoped后会形成一个组件作用域产生的效果是使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

<style scope>
    .example{
      color: red;
    }
</style>
<template>
    <div class="example"></div>
</template>

编译为:

<style>
.example[data-v-f3f3eg9]{
    color: red;
}
</style>
<template>
    <div class="example"></div>
</template>

• 当我们需要更改子组件中的样式比如在组件作用域中更改element-ui中的样式可以使用:deep()这个伪类

<style scoped>
.a :deep(.b) {
  /* ... */
}
.a ::v-deep .b{//使用::v-deep也时一样的作用
  /* ... */  
}
</style>

编译为：

.a[data-v-f3f3eg9] .b {
  /* ... */
}