微信小程序按钮为什么设置宽度无效？

让你明明白白学知识，有代码，有讲解，抄的走，学的会！

在使用 button 组件的时候，我们不需要微信官方的默认样式，需要自己设置，但是样式又不生效，怎么办？

上代码

index.wxml

<view class='operator-list'>
    <button >联系商家</button>
    <button>查看订单</button>
    <button class='active'>立即付款</button>
</view>

index.wxss

.operator-list button {
  padding: 4px !important;
  width: 120rpx !important;
  margin: 10rpx 0;
  font-size: 16rpx;
  color: #7A7A7A;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 40rpx;
  font-weight: 500 !important;
}

.operator-list button.active {
  background: #EE0000;
  color: #fff;
}

需要使用 !important ，虽然看起来加一个class，权重增加了，但是按钮没什么效果，直接上!important

!imporant 最好放在局部组件，或者带有命名空间的情况下使用，否则会印象到所有的button

1. 微信按钮，文字感觉是默认加粗的 所有，我设置了 font-size: 500 !important;
2. 按钮的padding，微信提供的比较大，我们需要重新设置，以满足我们的需求