uni-app button 自定义样式

代码

<template>
    <button class="auth-btn" hover-class="none" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
        手机号登录
    </button>
</template>

<style>
    .auth-btn {
        color: white !important;
        border: none !important;
        background: red !important;
        width: 80%;
    }
    
    .auth-btn::after {
        border: none;
        font-size: 28rpx;
    }
</style>

说明

主要是被uni-button[type='default']选择器给定义了样式，所以在自定义CSS样式需要加上!important。

可以选择覆盖type='default'的样式。