element 修改组件样式

⭐️ 当我们用 element-ui 组件库开发时，时常会遇到想改变 element-ui 组件样式的需求，比如修改下按钮的样式等等，但是我们又防止当前组件样式污染全局，在当前组件 css 中用了 scope 属性来让当前组件的 CSS 只作用于当前组件中的元素，使用 scoped 后，父组件的样式将不会渗透到子组件中。

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件:

1、stylus 的样式穿透 使用 >>>

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：(通过使用 PostCSS 来实现以下转换)

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

2、sass 和 less的样式穿透 使用 /deep/ 或 ::v-deep

1. /deep/

<style scoped>
/deep/ .b { /* ... */ }
</style>

上述代码将会编译成：

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

2. ::v-deep (效率更高)

<style scoped>
::v-deep .b { /* ... */ }
</style>

上述代码将会编译成：

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