如何更改 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}) { ... 异步函数 deleteTodo (id) { 尝试 { 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

定义自定义方法的最简单方法，可以采用通知类型、内容和 toast 选项。使用通知类型，您可以将不同的类名传递给您的自定义内容并覆盖根 toast 组件样式。打字稿示例：

export enum NOTIFICATIONS_TYPES {
  SUCCESS = 'success',
  ERROR = 'error',
}

const NotificationStringContent: React.FunctionComponent<{
  content: string;
}> = ({ content }) => (
  <Typography component="p" variant="text-200">
    {content}
  </Typography>
);

export const showNotification = (
  type: NOTIFICATIONS_TYPES,
  content: string | React.ReactElement,
  options: ToastOptions = {}
) => {
  const toastContent = typeof content === 'string' ? (
    <NotificationStringContent content={content} />
  ) : (
    content
  );
  toast(toastContent, {
    className: classnames(styles.toast, {
      [styles.toastSuccess]: type === NOTIFICATIONS_TYPES.SUCCESS,
      [styles.toastError]: type === NOTIFICATIONS_TYPES.ERROR,
    }),
    ...options,
  });
};

const NotificationContainer: React.FunctionComponent<{}> = () => (
  <ToastContainer
    position="bottom-left"
    hideProgressBar
    closeButton={<NotificationCloseButton />}
    closeOnClick={false}
    pauseOnHover
  />
);

export default NotificationContainer;

Answer 2

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

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

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

/* 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 3

用于自定义样式 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;
}