vant-ui组件库中如何修改NavBar导航栏的样式
作者：行动是最好的证明
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vant-ui组件库修改NavBar导航栏的样式
Vant-ui组件中没有改变导航栏的样式的属性，这个时候怎么办呢
我们可以用深度选择器/deep/ 或 ::v-deep，实现对组件内部的样式修改 如下：
引用NavBar组件
<div id="div_box_nav">
<van-nav-bar
title="标题"
left-text="返回"
left-arrow
/>
</div>
引用后是显示这个样子的 如下图：
但是现在需求是 要求导航栏背景色为蓝色 字体颜色 图标颜色都为白色
我们可以这样来修改
修改背景色这个好改写，直接拿到导航栏的属性名就可以修改
<style lass="scss" scoped>
.van-nav-bar {
background-color: #2f97ec;
}
</style>
写完后它就变颜色了
下边来修改字体的颜色
<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-nav-bar__title {
color: white;
font-size: 0.45rem;
}
</style>
使用deep来通过外层大的div盒子id标识定位来穿透设置原本组件的css样式
它这个字体颜色也就改变了
最后来修改箭头图标的颜色 也是用上边这个方法
<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-icon {
color: white;
}
</style>
最后这样也就成功可以修改原本的样式啦
vant组件库,修改NavBar组件的样式
今天在引用navbar组件的时候，发现没有像Tabbar那样能修改样式的属性，可以给
组件对应的标签去做修改，如果不能解决，那么就要使用深度选择器/deep/ 或 ::v-deep，实现对组件内部的样式修改
<van-nav-bar
fixed
:title="title"
:right-text="text"
@click-left="onClickLeft"
@click-right="onClickRight"
class="van-ellipsis"
>
<template #left>
<van-icon color="#fff" name="search" size="23" v-show="showIcon" />
</template>
</van-nav-bar>
.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;
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。