vue中修改第三方组件样式

    场景：我们在使用antdesign、elementui等第三方组件库时，通常都要对其中组件的样式进行调整，以适应页面整体的风格。而有时我们写的样式并不会对第三方组件生效，下面将分析原因，并提供处理方案。

    原因：我们在写vue文件时，为了各页面的样式互不干扰，通常会在vue文件的style标签上，加上一个特殊的属性：scoped。使用这个属性后，该 组件中的所有dom会添加上一个类似唯一标识的动态属性，可以使得CSS样式就只适用于当前组件内的元素。也就是说，在样式为scoped的vue文件里写的样式，是会带上标识的，而第三方子组件内的dom并没有这个标识，所以就不会起作用了。

    解决：

    方案1：使用样式穿透，即 /deep/，这样第三方组件也会加上标识，样式就可以生效了，参看下图。

    方案2： 将用于修改 第三方组件的样式，放在不带 scoped的 style标签中，使之成为全局样式。为了不污染全局中其他样式，可以在组件外层加上class 来区分隔离。