Как я могу изменить стили всплывающего сообщения о реагировании? - PullRequest
0 голосов
/ 25 марта 2020

Я хочу добавить свой собственный стиль во всплывающее сообщение о реагировании, в зависимости от того, был ли он успешным или ошибочным. До сих пор я пробовал следующий подход:

toastify. js

import { toast, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { css } from "glamor";


toast.configure({
    position: toast.POSITION.BOTTOM_RIGHT,
    autoClose: 3000,
    transition: Slide,
    pauseOnFocusLoss: false,
        className: css({
        backgroundColor: 'red',
    }),
    bodyClassName: css({
        backgroundColor: 'blue',
        height: '100%',
        width: '100%',
    })
});

export default function (message, type, styles = {}) {
    switch (type) {
        case type === 'success':
            toast.success(message);
            break;

        case type === 'error':
            toast.error(message);
            break;

        case type === 'info':
            toast.info(message);
            break;

        case type === 'warn':
            toast.warn(message);
            break;

        default:
            toast(message);
            break;
    }
}

Это функция, в которой я определяю, какой тип стиля сообщения для подтверждения показывает на основе на тип парам. Затем я вызываю эту функцию следующим образом:

функция экспорта по умолчанию ({params}) {... asyn c функция deleteTodo (id) {try {const res = await ax ios .delete (http://localhost:8000/api/delete-task/${id});

        toastifyMessage(res.data, 'success');
    } catch (error) {
        errorInfo(toastifyMessage(error, 'error'));
    }
}

return (
    <li className="menu-item">
        <i 
            className="fas fa-trash" 
            onClick={() => deleteTask(task._id)}
        ></i>
    </li>
);

}

И вот что я получаю:

enter image description here

Я все еще получить этот белый фон. Все, что я хочу, это удалить стили по умолчанию и добавить свои собственные для successand error.

...