小程序 使用 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;
}