小程序覆盖修改vant-ui的样式

开门见山地说，最近开发小程序在使用vant-ui的时候遇到了一些样式问题，具体情况是使用vant的组件的时候显示出来的颜色不是我想要的，但是框架中也没有参数能提供给我修改，直接找到元素的class修改也无效，经过一番努力后最终才修改好，下面就把我的经验给大家分享。
出现的问题是我在使用vant的nav-bar组件时，它左边的箭头颜色默认是蓝色的，但我想要的颜色是黑色的。

翻阅文档后，并没有发现能提供修改这个颜色的参数，然后就想直接修改这个元素的class。

可以看到vant里的一个样式文件设置了箭头颜色为蓝色了，而且直接在我们页面的wxss样式文件里修改.van-nav-bar__arrow这个class是无法生效的，最终查阅一番资料后发现可以用下面的方式解决。

view .van-icon-arrow-left{color: #000 !important;
}

要在需要修改的样式文件前面加个view，其目的是增加所修改的样式的权重，使得修改后的样式会覆盖之前vant原生写的蓝色样式。最后效果：

这样就完成了vant的样式修改，其他vant的组件也可以通过这种方式进行修改。

小程序覆盖修改vant-ui的样式相关推荐

小程序 rich-text 修改图片和文字样式
小程序 rich-text 修改图片和文字样式 utils文件 /*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style ...
微信小程序：修改单选radio大小样式
通过scale将其缩小 <radio style="transform:scale(0.8)" checked="true" value="tr ...
【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景
感觉自己封装的返回组件不太好用,于是尝试用一下Vant组件库里的 NavBar [uniapp]小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头, ...
微信小程序自定义修改swiper指示点样式
最近要用到微信小程序,于是就以CSDN的CSDN会员小程序作为练手案例,但是当我在使用官方的Swiper组件时发现,官方的指示点和我想要的效果不一致.于是,经过各种找资料,最终发现了解决方法. 官方的 ...
微信小程序之修改button形状大小样式
先上效果图: wxml: <view class="box"><button class="item" plain>1</butt ...
小程序swiper修改指示点样式
小程序swiper修改指示点样式小程序修改swiper指示点样式,实在无法忍受网上乱七八糟,很简单,几行样式就可以了,整的那么麻烦,有那空,睡会儿他不香,翻到这个文章的就别再找了,我这就是你要的答案 ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
小程序如何修改缓存中的某一个字段的值；小程序中如何应用vant组件如：van-dropdown-item、van-field
1.小程序如何往缓存中存数据将数据放入指定缓存中. 这里缓存块的名称叫'mydata',你可以根据自己的需求,取合适的名字.代码如下 let data = {name: '8BQ了',age: '1 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...

小程序覆盖修改vant-ui的样式

小程序覆盖修改vant-ui的样式相关推荐

最新文章

热门文章