用 vant 组件 仿京东 选择按钮 面板（更改 van-tag 字体颜色）

一、前言

vant组件 是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显：降低复杂度，隐藏无关细节。接下来主要介绍，如何在微信小程序上 仿造出下方的 京东选择按钮面板：

二、组件选择：van-tag

为什么不选择 van-button 呢？因为 van-button不支持 自定义 背景颜色（background-color），除非更改 van-button 的源码。

三、尝试过程

然后接下来，需要解决的问题，就是字体的颜色问题。van-tag只提供了 更改背景色的接口，van-tag内部的字体颜色默认是白色，我们期望的颜色是深灰色。怎么解决这个问题呢？

我一开始的设想是使用 van-tag 的 custom-class 这个接口，传入颜色为 深灰色的类（我传入的类的名字叫 tag）。但是在开发者工具中预览，发现颜色并没有更改。在于是使用调试面板审查 css，发现传入的类的优先级是最低的，所以如果和原组件的类的属性冲突的话，传入的属性是会被原属性覆盖的 ：