vant-ui组件库中如何修改NavBar导航栏的样式_vue.js_

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

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

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

引用NavBar组件

引用后是显示这个样子的 如下图：

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

我们可以这样来修改

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

写完后它就变颜色了

下边来修改字体的颜色

使用deep来通过外层大的div盒子id标识定位来穿透设置原本组件的css样式

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

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

最后这样也就成功可以修改原本的样式啦

vant组件库,修改NavBar组件的样式

今天在引用navbar组件的时候，发现没有像Tabbar那样能修改样式的属性，可以给

组件对应的标签去做修改，如果不能解决，那么就要使用深度选择器/deep/ 或 ::v-deep，实现对组件内部的样式修改

.van-nav-bar { background-color: rgb(241, 186, 66); } ::v-deep .van-icon { color: #fff; } ::v-deep .van-nav-bar__text { color: #fff; } ::v-deep .van-ellipsis { color: #fff; } 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！