关于vue.js:vue中修改UI组件样式的几种方法

在开发中大家常常遇到一个问题，就是引入了诸如elementUI等UI组件之后，想要批改UI组件的款式却无从下手。组件通过层层封装，咱们须要先找到具体须要批改的最终元素，并找到其选择器。
简略列举三种批改形式：
（1）另写一个<style></style>， 不要加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>
    // 本地款式
</style>