关于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>