Let you learn knowledge clearly, there are codes, there are explanations, copy of the walk, learn will!

When using button component, we do not need wechat official default style, we need to set ourselves, but the style does not take effect, how to do?

In the code

index.wxml

<view class='operator-list'> <button> Contact the merchant </button> <button> view the order </button> <button class='active'</button> </view>Copy the code

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;
}
Copy the code

Need to use! Important, although it looks like add a class, weight increase, but the button has no effect, directly on! important

! Imporant is best used in local components or with namespaces; otherwise, all buttons will be remembered

  1. Font-size: 500! important;
  2. The padding of the button provided by wechat is relatively large, so we need to reset it to meet our needs