如何更改 react-toastify 弹出消息的样式？

Question

我想将我自己的自定义样式添加到 react-toastify 消息弹出窗口，具体取决于它是成功还是错误。到目前为止，我尝试了以下方法：

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;
    }
}

这是一个函数，我根据类型参数定义 toastify 显示的消息样式类型。然后我像这样调用这个函数：

导出默认函数 ({params}) { ... async function deleteTodo (id) { try { const res = await axios.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>
);

}

这就是我得到的：

我仍然得到那个白色背景。我想要的只是删除默认样式并添加我自己的成功和错误。

Answer 1

就我而言（也是一个 React 应用程序）我只需要更改：

• 警告和错误的背景颜色
• 进度条颜色
• 字体

我发现这是最简单、最快的解决方案。在我的应用程序的 CSS 文件中，我覆盖了默认类中的背景属性。我还为吐司主体和进度条定义了自己的类：

/* https://fkhadra.github.io/react-toastify/how-to-style/ */
.Toastify__toast--warning {
  background: #FFE8BC !important;
}
.Toastify__toast--error {
  background: #FCA7A9 !important;
}
.toastBody {
  font-family: "Atlas Grotesk Web", Arial, Helvetica, sans-serif;
  color: #10171D; /* #10171D */
  font-size: 0.875rem !important;
}
.toastProgress {
  background: #333F48 !important;
}

要使用我的课程：

<ToastContainer
  progressClassName="toastProgress"
  bodyClassName="toastBody"
/>

Answer 2

用于自定义样式 react-toastify

css

.Toastify__toast--error {
    border: 1px solid #EB5757;
    border-radius: 50px !important;
    background: #FAE1E2 !important;
}
.Toastify__toast--error::after {
  content : url('../assets/images/svg/closeToast.svg'); // Your svg Path
  position: absolute;
  color: #333333;
  font-size: 15px;
  font-weight: 700;
  left:265px;
  padding-top: 14px !important;
}
.Toastify__toast--error::before {
  content: url("../assets/images/svg/errorToast.svg");// Your svg Path
  position:relative; 
  z-index:100000;
  left:12px;
  top:6px;
}
.Toastify__toast--success {
  border: 1px solid #3A9EA5 !important;
  border-radius: 50px !important;
  background: #F0F9FA !important;
}
.Toastify__toast--success::before {
  content: url("../assets/images/svg/successToast.svg");// Your svg Path
  position:relative; 
  z-index:100000;
  left:12px;
  top:6px;
}
.Toastify__toast--success::after {
  content : url('../assets/images/svg/closeToast.svg');// Your svg Path
  position: absolute;
  color: #333333;
  font-size: 15px;
  font-weight: 700;
  left:265px;
  padding-top: 14px !important;
}
.Toastify__toast--warning {
  border: 1px solid #E78326  !important;
  border-radius: 50px !important;
  background: #FADFC5 !important;
}
.Toastify__toast--warning::before {
  content: url("../assets/images/svg/warnToast.svg");// Your svg Path
  position:relative; 
  z-index:100000;
  left:12px;
  top:6px;
}  
.Toastify__toast--warning::after {
  content : url('../assets/images/svg/closeToast.svg'); // Your svg Path
  position: absolute;
  color: #E78326;
  font-size: 15px;
  font-weight: 700;
  left:265px;
  padding-top: 14px !important;
}
.Toastify__toast-body {
  color: #444C63    ;
  font-size: 16px;
  padding-left: 20px;
  line-height: 20px;
  padding: 0px;
  padding-top: 25px;
  width: 100%;
  font-weight: 400;
  margin-left: 25px !important;
} 
.Toastify__toast > button>  svg {
    display: none;
}