样式覆盖

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

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

    1. /* page.wxss */
    2. .van-button--primary {
    3. background-color: pink;
    4. }
    1. Component({
    2. options: {
    3. styleIsolation: 'shared',
    4. },

    外部样式类的相关知识背景请查阅

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

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

    1. <van-cell
    2. title="单元格"
    3. value="内容"
    4. title-class="cell-title"
    5. value-class="cell-value"

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

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