开门见山地说,最近开发小程序在使用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的组件也可以通过这种方式进行修改。