微信小程序UI组件vant-weapp样式修改

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

1.解除样式隔离

Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式（亲测有效）

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>
/* page.wxss */
.van-button--primary {
  font-size: 20px;
  background-color: pink;
}

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared’选项

<van-button type="primary">主要按钮</van-button>
Component({
  options: {
    styleIsolation: 'shared'
  }
});
.van-button--primary {
  font-size: 20px;
  background-color: pink;
}

2.使用外部样式类

Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。
需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加
!important以保证外部样式类的优先级（亲测有效）。

<van-cell
  title="单元格"
  value="内容"
  title-class="cell-title"
  value-class="cell-value"
/>
.cell-title {
  color: pink !important;
  font-size: 20px !important;
}
.cell-value {
  color: green !important;
  font-size: 12px !important;
}

3.使用custom-class属性修改cell的背景底色
每一个组件文档中，底部都会有类似外部样式类 ，如下图所示

<van-cell title="单元格" value="内容" custom-class="red" />
.red{
  background-color: red !important;
}