小程序 使用 UI 组件 Vant Weapp 、vant组件样式覆盖

注意：使用vant 包，需要把app.json 中 的"style:v2" 这句去掉 不然会出现样式混乱的问题

Vant Weapp组件库的使用 参考官网

vant官网

Vant Weapp 组件样式覆盖

Vant Weapp 基于微信小程序的机制，为开发者提供了 3 种修改组件样式的方法：1. 解除样式隔离：在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式2. 使用外部样式类：需要注意的是普通样式类和外部样式类的优先级是未定义的，使用时需要添加 !important 保证外部样式类的优先级3. 使用css变量：在页面或全局对多个组件的样式做批量修改以进行主题样式的定制

第一种:解除样式隔离

在自定义组件中如果需要Vant Weapp 组件的样式，需要在自定义组件中的 .js 中解除
样式隔离，并且设置为shared 才能生效

Component({options:{styleIsolation:"shared"}
})

自定义组件的 wxss

.van-button--primary{font-size: 28rpx !important;background: red !important;border: 1px solid red !important;
}

第二种：使用外部样式类

在自定义组件的 wxml 中 给button 组件添加外部样式类 custom-class

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

然后在 wxss 文件中直接修改样式

.custom-class{font-size: 28rpx !important;background: red !important;border: 1px solid red !important;
}

第三种：使用 css 变量

使用场景：
如果需要多个页面或者一个组件中 需要批量修改组件、定制主题

到app.wxss 文件 定义page

page{--color:lightgreen;
}

然后到 使用 公共组件 wxss 中

.custom-class{font-size: 28rpx !important;background: var(--color) !important;border: 1px solid var(--color) !important;
}