微信小程序Button标签的样式问题

在微信小程序使用button组件时，发现在class中设置width不生效，下面贴上代码：

.my-button{
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0;
}

经过微信调试工具排查后，发现user agent的样式优先级居然大于我们自己写的样式类，这在浏览器中基本是不可能发生的事情

解决方案其实比较简单，给width添加!important的后缀或者style="width:140rpx"即可，修改后我们再看一下效果：

加上!important之后，其实宽度的实际效果已经符合我们的预期了，但是微信调试工具却仍然显示user agent样式优先，这应该算是调试工具的一个bug吧。

参考文章
https://juejin.cn/post/6884089615700426766