mpvue + Vant Weapp 小程序改变 Vant 组件样式

<template>
  <div class="container">
  	<van-button type="primary" size="large" custom-class="login-btn">登录</van-button>
  </div>
</template>

<style>
.login-btn {
  background-color: #ee3f4d!important;
  border: 1PX solid #ee3f4d!important;
}
</style>
<style scoped>
</style>

重点就是组件上的属性 custom-class（根节点样式类）和 !important（优先级，因为根节点样式类是加在 class 开头的），还有就是不要放在 <style scoped> 下，不然会无法修改。

参考资料

• 如何和何时使用 CSS 的! important_CSS 教程_w3cplus
• Button 按钮 - Vant Weapp
• vue 中慎用 style 的 scoped 属性 - 前端开发之路 - SegmentFault 思否