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;
}