修改Vant组件库NavBar 导航栏的样式

掉头发类型的选手

已于 2022-06-20 20:57:31 修改

阅读量9.2k

点赞数 13

文章标签：前端

于 2021-10-28 19:40:50 首次发布

本文链接：https://blog.csdn.net/h360583690/article/details/120529993

版权

本文介绍了在Vue项目中如何利用深度选择器和浏览器开发者工具来定制Vant和Element UI组件的样式，提供了一个简单的例子，展示了如何改变导航栏的标题、文字和箭头颜色。同时，强调了通过运行代码并在开发者工具中选择元素，查看并修改对应的class来快速调整样式的方法。

摘要由CSDN通过智能技术生成

最近在做一个关于vue的小项目，在做的过程中用到了Vant组件库，需要去改一下导航栏上的一些样式，官网上写的有点复杂。其实用深度选择器就能实现修改。

            <van-nav-bar
                title="标题"
                left-text="返回"
                left-arrow
            ></van-nav-bar>

这个是它自己的样式。

用深度选择器给它修改：

::v-deep .van-nav-bar__title {
    color: red;
}
::v-deep .van-nav-bar__text {
    color: red;
}
::v-deep .van-nav-bar__arrow {
    color: red;
}

二，在开发中还有许多修改样式的方法可以用，介绍一个比较简单的方法

<template>
  <div class="hello">
    <el-page-header @back="goBack" content="标题"> </el-page-header>
  </div>
</template>

比如上面这段代码，想要修改它的样式，标题，返回，箭头的样式。可以先运行起来，在浏览器中打开开发者工具，用小箭头选择要修改的内容，右边会出现它的class，根据class就可以修改它的样式。

<template>
  <div class="hello">
    <el-page-header @back="goBack" content="标题"> </el-page-header>
  </div>
</template>
<style>
.el-icon-back {
  color: red;
}
.el-page-header__title { 
  color: blue;
  font-size: 20px;
}
.el-page-header__content {
  color: yellow;
  font-size: 30px;
}
</style>