vant-ui组件库中修改NavBar导航栏的样式

Vant-ui组件中没有改变导航栏的样式的属性,这个时候怎么办呢

我们可以用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改 如下:

1.引用NavBar组件

引用后是显示这个样子的 如下图:
在这里插入图片描述

但是现在需求是 要求导航栏背景色为蓝色 字体颜色 图标颜色都为白色

我们可以这样来修改

修改背景色这个好改写,直接拿到导航栏的属性名就可以修改


写完后它就变颜色了
在这里插入图片描述

下边来修改字体的颜色


使用deep来通过外层大的div盒子id标识定位来穿透设置原本组件的css样式
在这里插入图片描述

它这个字体颜色也就改变了

最后来修改箭头图标的颜色 也是用上边这个方法


在这里插入图片描述
最后这样也就成功可以修改原本的样式啦

你可能感兴趣的:(vue,css)