微信小程序 Vant dropdown 组件自定义样式

很普通地使用了van-dropdown-menu和van-dropdown-item组件但如下图所示，默认 vant 组件样式有问题，无法融入背景色。

<van-dropdown-menu active-color="#1989fa"><van-dropdown-item value="{{ value }}" options="{{ option }}" bind:change="onChange" /></van-dropdown-menu>

解决方案

添加custom-class字段

<van-dropdown-menu active-color="#1989fa" custom-class="dropdown"><van-dropdown-item value="{{ value }}" options="{{ option }}" bind:change="onChange" /></van-dropdown-menu>

在.wxss文件中添加对应的.dropdown样式

.dropdown {margin-right: 5px;--dropdown-menu-background-color: #2E75B6;--dropdown-menu-title-text-color: #ffffff;}

完成

原理

首先看miniprogram_npm\@vant\weapp\dropdown-menu\index.wxml这里预留了一个用户自定义样式类查看miniprogram_npm\@vant\weapp\dropdown-menu\index.wxss用户能够自定义的属性都在这里了（dropdown类名是可以自定义的）