微信小程序 vant 样式覆盖与定制主题

3种方式修改组件样式

1. 解除样式隔离

直接在页面的样式文件中覆盖样式

wxml：

<van-button type="primary">主要按钮</van-button>

wxss：

.van-button--primary { font-size: 20px; background-color: pink; }

注意：在自定义组件中使用vant组件时，需要开启

styleIsolation: 'shared'

如：

Component({
  options: {
    styleIsolation: 'shared',
  },
});

2. 使用外部样式

具体的样式类名称可查阅对应组件的“外部样式类”部分。

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

3. 使用CSS变量

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

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

wxml:

<van-button class="my-button">
  默认按钮
</van-button>

wxss:

.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

wxml:

<van-button style="{{ buttonStyle }}">
  默认按钮
</van-button>

wxss:

Page({
  data: {
    buttonStyle: `
      --button-border-radius: 10px;
      --button-default-color: green;
    `,
  },

  onLoad() {
    setTimeout(() => {
      this.setData({
        buttonStyle: `
          --button-border-radius: 2px;
          --button-default-color: pink;
        `,
      });
    }, 2000);
  },
});

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

定制全局主题样式

page {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}