vue学习笔记：修改第三方组件样式

        为了提高开发效率，我们经常会使用第三方组件库，例如Ant Design，Vant，Element等。一般组件库会为我们提供比较美观的样式供开发者选择，但是当提供的组件样式不满足需求时，我们需要能够自己来修改组件的样式。

        例如下面这个例子，我用到了Vant组件库中的Navbar组件，这是一个标题组件，默认的样式是这样的：

        现在我需要将组件的背景改为淡蓝色，文字改为白色。

        首先利用谷歌浏览器的元素选择工具，查找到决定组件背景样式的class

如上图所示，此时决定该组件背景颜色的class是.van-nav-bar，然后我们观察一下对应的div，有没有data-v-xxxxx的属性，并且该属性和引用组件的页面中的元素的data-v-xxxxxx属性是不是一致（这个属性是为了防止样式冲突，在页面style 中加了scoped属性后自动生成的）

 （1）如果.van-nav-bar所作用的div上的data-v-xxxx与父组件其它元素的data-v-xxxx一致，则直接定义样式即可。

 例如上面两个data-v-xxxx是一致的，所以直接定义样式

 .van-nav-bar {
        background-color: rgb(0, 140, 255);
    }

（2） 如果不一致，需要在定义样式的同时加上/deep/

       例如在修改文字颜色时，文字样式所对应的div上并没有data-v-xxxxx属性，此时直接定义样式不会生效，必须在样式前面加上/deep/

/deep/
.van-nav-bar__title {
      color: #fff;
}

         修改后，效果如下所示：