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

&lt;template&gt;&lt;div class="container"&gt;&lt;van-button type="primary" size="large" custom-class=&

勤为径苦作舟

4255人浏览 · 2018-12-28 11:07:07

勤为径苦作舟 · 2018-12-28 11:07:07 发布

<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> 下，不然会无法修改。

参考资料

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^