微信小程序设置按钮样式

微信小程序设置按钮样式

今天突然发现小程序原生按钮样写在wxss里的样式无效，百度后找到几种解决方案，大家可以参考下，最后还有按钮设置不可用时的样式设置哦。
这是无效的代码：

button{
  height: 90rpx;
  width: 100% ;
  color: white;
  font-size: 30rpx ;
  background-color: rgb(248, 61, 28) ;
  }

解决方案

1. 把 app.json 里的 style:“v2” 去掉（不推荐）

去掉之后确实可以修改按钮的样式了，但是大家说去掉这个其他组件的样式会发生变化，不推荐使用。

2. 样式后跟!important（有效）

button{
  height: 90rpx !important;
  width: 100%  !important;
  color: white !important;
  font-size: 30rpx !important;
  background-color: rgb(248, 61, 28) !important ;
  }

这种方法我试过了，也是有效的，不过这种方法对于样式修改比较少的比较适用，像我这样修改的太多，代码量就比较大，比较冗余。

3. 用id选择器（操作简单，效果惊奇）

 <button id="btn"  disabled="{{isDisabled}}">申请</button>

给按钮绑定id选择器btn，wxss文件设置样式即可，附带上修改按钮不可用时的样式代码，即#btn[disabled]

/* 按钮可用 */
#btn{
  height: 90rpx;
  width: 100% ;
  color: white;
  font-size: 30rpx ;
  background-color: rgb(248, 61, 28) ;
}
/* 按钮不可用 */
#btn[disabled] {
  background: #BFCBD9;
  color: white ;
  border-color: #BFCBD9;
}

4.直接在wxml文件写style

 <button style="height: 90rpx;width: 100%; color:white; 
 font-size: 30rpx ;background-color: rgb(248, 61, 28) ;">
 申请
 </button>

当当当，效果如下局部截图
可用的时候

不可用的时候