微信小程序button按钮设置宽度无效

今天药忘吃喽~ 2023-10-10 22:50 19阅读 0赞

## button按钮设置宽度无效 ##

### 背景： ###

在开发小程序的过程中，遇到了button按钮设置宽度无效的问题

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级，涉及的组件有 button,icon,radio,checkbox,switch,slider。app.json 中配置 “style”: “v2” 表明启用新版的组件样式。因此我们的button是有默认样式的。当我们想要自定义按钮样式时，需要在wxss中编写按钮的样式来覆盖默认样式。

先贴原来的代码

<view class="personalInfo_right">
      <form catchsubmit="formSubmit" class="personal_form">
        <view class="title">
          <text>SZTUFA</text>
        </view>
        <view class="ID">
          <text class="ID_title">ID:</text>
          <view class="nickName">
            <input type="nickname" class="nickName_input" name="input" placeholder="点击输入" placeholder-class="placeholderStyle" />
          </view>
        </view>
        <button class="submit_button" formType="submit" style="">提交</button>
      </form>
    </view>

.submit_button {
        
      width: 100rpx;
      height: 80rpx;
      line-height: 80rpx;
      padding: 0;
      margin-top: 20rpx;
      background-color: #023692;
      color: white;
    }

![在这里插入图片描述][787c62e6c1ed44bdbac9270b578b139f.png_pic_center]

可以看到，我在wxss中给按钮自定义的宽度是没有生效的。

但是查看调试器，我看到了非常不可思议的事情。

![在这里插入图片描述][df88472021ef4b62a6b67afaa663c672.png_pic_center]  
![在这里插入图片描述][202841c26cbd4dc0becbff7a5861829d.png_pic_center]

正如上图所示，我自定义的宽度其实是覆盖了按钮的默认样式的，但在Computed视图中我们的button宽度仍为184。这就让我很疑惑了。因为我自己写了个demo是能正常覆盖的，这里却不行，当时我怀疑是开发者工具出bug了。

demo代码如下：

.button_wrapper {
        
      display: flex;
      width: 90%;
      height: 200rpx;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 100rpx;
    }
    
    .button_wrapper button {
        
      padding: 0;
      height: 100rpx;
      line-height: 100rpx;
      width: 140rpx;
      background-color: green;
    }

![在这里插入图片描述][8e5f1742e1904bfcbc5e823353004380.png_pic_center]

### 解决方案 ###

在查阅了一些网上资料的资料后，有三种解决方案：

1.  删除app.json的配置"style": “v2”（不推荐）
    
    如果采用此方法会导致其他新版的组件样式不可用
2.  使用内联样式
    
        <button type="primary" style="width:100%">按钮1</button>
        <button type="primary" style="width:120rpx">按钮2</button>
3.  不要直接在button的类名下编写它的样式
    
    听起来好像不太好理解，其实就是不要像下面这样写
    
        .submit_button {
              
          width: 100rpx;
        }
    
    正确写法如下：
    
        .button_wrapper button {
              
          padding: 0;
          height: 100rpx;
          line-height: 100rpx;
          width: 140rpx;
          background-color: green;
        }
    
    或者
    
        .personal_form .submit_button {
              
          width: 100rpx;
        }
    
    注意这里选择器的写法，这也是为什么我的demo里面能够设置按钮宽度的原因。

[787c62e6c1ed44bdbac9270b578b139f.png_pic_center]: https://img-blog.csdnimg.cn/787c62e6c1ed44bdbac9270b578b139f.png#pic_center
[df88472021ef4b62a6b67afaa663c672.png_pic_center]: https://img-blog.csdnimg.cn/df88472021ef4b62a6b67afaa663c672.png#pic_center
[202841c26cbd4dc0becbff7a5861829d.png_pic_center]: https://img-blog.csdnimg.cn/202841c26cbd4dc0becbff7a5861829d.png#pic_center
[8e5f1742e1904bfcbc5e823353004380.png_pic_center]: https://img-blog.csdnimg.cn/8e5f1742e1904bfcbc5e823353004380.png#pic_center