Я хочу добавить свой собственный стиль во всплывающее сообщение о реагировании, в зависимости от того, был ли он успешным или ошибочным. До сих пор я пробовал следующий подход:
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>
);
}
И вот что я получаю:
Я все еще получить этот белый фон. Все, что я хочу, это удалить стили по умолчанию и добавить свои собственные для successand error.