3步教你如何修改uniapp button组件颜色?

uniapp的button组件type=“primary” 默认颜色如下：

微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，抖音小程序为红色，QQ小程序为浅蓝色。

那么如何修改成和自己的主题色相搭配的颜色呢？官方的建议是：”如想在多端统一颜色，请将type改用default，然后自行写样式“。

直接上代码：

1.修改按钮颜色

button[type=default]{
	background-color:$uni-primary;  // 这里我使用的是自定义的主题色，也可以直接换成十六进制的颜色，如：#000000
	color: #fff;
}

2.修改按钮点击(按下去)的颜色

button.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: $uni-primary;;
	border-color: $uni-primary;;
  }

3.在button组件上加上hover-class属性：

<button type="default" hover-class="is-hover"> 充值 </button>