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

2,095 阅读1分钟

今天在引用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;
}