修改elementUI组件样式的方式

在开发中大家经常遇到一个问题，就是引入了诸如elementUI等UI组件之后，想要修改UI组件的样式却无从下手。组件经过层层封装，我们需要先找到具体需要修改的最终元素，并找到其选择器。
简单列举三种修改方式：
（1）另写一个， 不要加scoped，将需要覆盖的元素样式写入进去，scoped属性限制了样式仅在当前文件作用域内有效，不会穿透到封装元素上，去掉scoped属性后就可以实现样式穿透，缺点是会覆盖全局样式，但我们可以在引入组件外包裹一个父元素，然后使用父子选择器来精确命中本组件内的UI组件元素，进而规避样式污染的问题

<style lang="less">
    // 需要覆盖的样式
    .wrapper .el-table--body {}
</style>
<style lang="less" scoped>
    // 本地样式
</style>

（2）less 和 sass 中都提供了 /deep/ 深度穿透选择器，此时我们依旧可以保留scoped属性而不必担心样式污染。

<style lang="less" scoped>
    /deep/ .el-table--body {}
</style>

（3）vue中提供了深度选择器>>>，但是sass等工具还无法识别他，需要写在单独的style里面

<style scoped>
    // 需要覆盖的样式
    .wrapper >>> .el-table--body {}
</style>
<style lang="less" scoped>

// 本地样式

标签: vue