微信小程序按钮button样式

写微信小程序项目，有时候会遇到按钮button组件状态样式显示问题，以下写出一些自己的心得体会。
虽然button组件有自己的type颜色值，但是大多数情况下，按钮状态颜色是定制开发的，那么当按钮禁用或启用时，我们怎么随心所欲的去控制按钮的样式呢？

disable属性为true的状态下，按钮默认样式为浅灰底深灰字。 disabledDdefault.png
若想显示自定义的样式，如当可用时橙底白字，禁用时灰底白字。
enabled.png
disabled.png

wxss样式：

//botton的基本样式
.formContbutton.submitBtn{
margin-top:60rpx;
width:100%;
height:100rpx;
display:flex;
justify-content:center;
align-items:center;
font-size:32rpx;
font-weight:bold;
}

//botton的启用样式
.formContbutton.active{
color:#fff !important;
background:#ff9537 !important;
}

//botton的禁用样式
.formContbutton.gray{
color:#fff !important;
background:#d9d9d9 !important;
}

wxml内容：
<button formType="submit"disabled='{{!phone}}'class="submitBtn {{phone!=''?'active':'gray'}}">立即新增</button>

 1、加上!important是为了将样式设为最高级别；

 2、用phone变量来判断当前按钮是否禁用，进而判断是用什么状态样式；

 3、wxss类名要写在一个class里面，否则只有后面的类名样式才会生效喔。

希望我的一点点心得可以帮助到大家ヾ(@^▽@)ノ