样式覆盖

介绍

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

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档

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

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

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

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

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

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档

Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

  1. <van-cell
  2.   title="单元格"
  3.   value="内容"
  4.   title-class="cell-title"
  5.   value-class="cell-value"
  6. />
  1. .cell-title {
  2.   color: pink !important;
  3.   font-size: 20px !important;
  4. }
  6. .cell-value {
  7.   color: green !important;
  8.   font-size: 12px !important;
  9. }

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

样式覆盖 - 图1