react中基于Antd Mobile封装Toast组件支持自定义背景色

js文件：

import {Toast} from "antd-mobile";
import './index.css';

/**
 * custom_toast_error: error
 * custom_toast_warn: warn
 * custom_toast_normal: normal
 * */

export const customToast = ({className, text, duration = 2000}) => {
    const element = document.getElementsByClassName(className);
    if (!element || element.length < 1) {
        const create_div = document.createElement('div')
        create_div.setAttribute('class', className)
        document.body.appendChild(create_div)
    }

    return Toast.show({
        getContainer: document.getElementsByClassName(className)[0],
        content: text,
        duration: duration
    })

}

css文件：

.custom_toast_error .adm-toast-mask .adm-toast-main-text {
    background: #FF0000 !important;
}

.custom_toast_warn .adm-toast-mask .adm-toast-main-text {
    background: rgba(255, 116, 0, 0.6) !important;
}

.custom_toast_normal .adm-toast-mask .adm-toast-main-text {
    background: rgba(2, 104, 234, 0.6) !important;
}

如何使用：

// 引入
import {customToast} from '@/components/toast';

// 使用
 customToast({className: 'custom_toast_error', text: '我是错误'})

效果图：