在vue中使用组件时，覆盖默认样式（更方便准确的使用样式）

设置到的知识点，scoped、deep

在vue中由于存在很多style，可能污染全局样式。所以大家在使用时一般会在style标签上加了scoped属性。这个属性是为了我们组件私有化，让当前组件的样式不影响到其他组件，如果你的style标签加了scoped这个属性，那么当你直接在这里面修改样式是不会成功的，因为Element-UI的样式是定义在全局中，使用scoped时，局部样式会被全局样式覆盖。

scoped原理，是在当前组件的所有标签中添加一个属性，类似data-v-2f305acb。同时这个组件中的样式也会添加这个值。那么组件内的样式就只会在这个组件内的标签上生效。

但是使用其他组件时，子组件内部的元素标签不会有同样的属性（就算子组件也加了scoped，也是另一个data-v-xxxx）。所以想要生效样式，必须绕开或者穿透scoped。

一、绕开

1、直接去掉scoped

去掉scoped确实有用，但是这就和我们组件私有化的想法背道而驰了，很容易污染样式。所以这个方法想想就好了，可以忽略。

2、多写一个style

vue支持多个style，所以在另一个没加scoped的style里写关于子组件的样式就好了。可以最大限度的避免样式污染。同时最好带上一个父组件上的标签名，避免父组件中引用了多个一样的子组件时，这些子组件之间的污染。

二、穿透

穿透有三个方法，>>>、::v-deep 、/deep/。

直接在scoped中使用，子组件的标签名前根据使用环境加这三种其一就可以。

>>>只作用于css的深度选择器，对于less和scss不起作用。

在vue-cli3编译时，/deep/的方式会报错或者警告，导致变异报错。这个时候用::v-deep。

在vue3中可以使用::v-deep得简写:deep。

所以总的来说更推荐使用::v-deep