微信小程序设置按钮样式

微信小程序设置按钮样式

今天突然发现小程序原生按钮样写在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>

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

不可用的时候

你可能感兴趣的