WX小程序-VantWeapp组件库样式修改

1.全局修改样式

根据官方文档查找组件样式类，对其样式进行修改。

文档组件样式地址：vant-weapp/packages/common/style/var.less at dev · youzan/vant-weapp · GitHub      

 比如使用按钮组件

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

在app.scss中修改样式

 page{
   --button-primary-color: black;
   --button-primary-background-color:blue;
 }

2.page.scss中修改样式

注意：其他页面不能使用 防止与全局组件样式冲突，可以添加一个类名

.pageclass{
   --button-primary-color: black;
   --button-primary-background-color:yellow;
 }

//全局样式修改
<van-button type="primary">主要按钮</van-button>
//页面样式修改
<view class="pageclass">
<van-button type="primary">主要按钮</van-button>
</view>

3.组件中修改样式

注意：需要添加一个类名，防止与页面样式冲突

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

.van-button {
  --button-primary-color: black;
  --button-primary-background-color: gray;
}