vue中修改UI组件样式的几种方法

在开发中，我们经常会遇到一个问题，就是引入elementUI等UI组件后，无法开始修改UI组件的样式。组件层层封装，我们需要先找到最终需要修改的元素，找到它的选择器。简单列举三种修改方法：（1）再写一个，不加scoped，写在需要覆盖的元素style中，scoped属性限制style只在该范围内有效当前文件，不会穿透到封装元素，去掉scoped属性实现样式穿透。缺点是会覆盖全局样式，但是我们可以在导入的组件外面包裹一个父元素，然后在这个组件中使用父子选择器准确命中UI组件元素，从而避免样式污染的问题//需要覆盖的样式。wrapper.el-table--body{}//localStyle(2)less和sass中都提供了/deep/深度穿透选择器。这时候我们仍然可以保留scoped属性而不用担心样式污染。/deep/.el-table--body{}(3)深度选择器>>>vue中提供了，但是sass等工具还不能识别他，所以你需要在一个单独的样式中写//需要覆盖的样式。包装器>>>.el-table--body{}//本地样式