微信小程序去除button边框

微信小程序使用button按钮会带有默认的边框，按设计稿写样式通常要去掉这个，一些特殊操作也不能显示这个边框
✨两步就可以去掉

1、 加上 plain 属性

plain="true" 或者只写plain都行

<button plain="true">按钮</button>

2、对按钮样式进行修改

button[plain] {
  border: 0
}

---

这时候会发现一个新问题，那就是原本设置在按钮上的样式不生效了，我觉得应该是优先级的问题

👉两种解决办法

1、直接给样式加上 !important 提升优先级

button {
  background: rgba(34, 100, 186, 0.1) !important;
  color: #508af5 !important;
}

2、在按钮外增加一个父盒子，写样式时加上这个父盒子的类名

<view class="btn">
  <button plain="true">按钮</button>
</view>

.btn button {
  background: rgba(34, 100, 186, 0.1);
  color: #508af5;
}