最简单的解决方案

调整Toastify的BG或实际上任何样式的最简单的解决方案是使用ToastContainer props toastStyle：它接受JSX属性，导入必要的包后，在添加ToastContainer组件时，只需传入toastStyle属性，就可以开始了。

<ToastContainer toastStyle={{ backgroundColor: "crimson" }} />

根据@Laurens的回答，我发现代码沙盒中的模式非常有用。下面是我得到如下所示的通知所做的事情

首先，我将吐司容器安装在应用程序的根目录下，在App组件中

import React from 'react';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './redux/store';
import Routes from './Routes';

const App = () => {
  return (
    <Provider store={store}>
      <ToastContainer
        autoClose={2000}
        position="top-center"
        className="toast-container"
        toastClassName="dark-toast"
      />
      <Routes />
    </Provider>
  );
};

然后，对于每种通知样式，我定义了一系列CSS样式。

// customToast.js
import { toast } from 'react-toastify';
import { css } from 'glamor';

const customToast = {
  success(msg, options = {}) {
    return toast.success(msg, {
      ...options,
      className: 'toast-success-container toast-success-container-after',
      progressClassName: css({
        background: '#34A853',
      }),
    });
  },
  error(msg, options = {}) {
    return toast.error(msg, {
      ...options,
      className: 'toast-error-container toast-error-container-after',
      progressClassName: css({
        background: '#EE0022',
      }),
    });
  },
  info(msg, options = {}) {
    return toast.info(msg, {
      ...options,
      className: 'toast-info-container toast-info-container-after',
      progressClassName: css({
        background: '#07F',
      }),
    });
  },
};

export default customToast;

要使用它们，只需执行import customToast from 'customToast.js'。现在您可以使用customToast.success、customToast.error等
成功通知的样式如下所示

.toast-success-container {
  color: #000 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #34A853 !important;
  box-shadow: 0px 1px 5px rgba(248, 175, 175, 0.1) !important;
}

.toast-success-container-after {
  overflow: hidden;
  position: relative;
}

.toast-success-container-after::after{
  top: 0;
  left: 0;
  content: '';
  width: 7px;
  height: 100%;
  position: absolute;
  display: inline-block;
  background-color: #34A853;
}

您还会注意到，我不得不在css中添加一系列!important

最简单的解决方案是设置theme属性，如文档中所述。

全局设置主题

//Set the theme globally 
<ToastContainer theme="colored" />

或为每个吐司定义

// define per toast
toast.info("Display a blue notification of type info", { theme: "colored" });

这会根据吐司类型（error，warning，info等）更改背景颜色。希望这对将来的任何人都有帮助。

您可以使用Glamor轻松地调整简单的事情，如吐司背景颜色。
This example使用glamor以绿色背景显示简单的吐司。

toast("Hello!", {
    className: css({
        background: "#00FF00 !important"
    })
});

如果需求更复杂，您可以按照this example全局实现自己的样式。

如果颜色是硬编码值，你可以在CSS中简单地覆盖它。但是，如果颜色需要可变，你也可以使用Helmet。例如，作为一个应用主题颜色，可以通过用户偏好或其他方式进行更改。看看你的示例，你可以包括

<Helmet
    style={[
      {
        cssText: `
          .Toastify__toast--success {
            background: ${customColor} !important;
          }
      `,
      },
    ]}
  />

customColor变量将从您的商店中取出，并可以动态更新，为您提供自定义的吐司背景颜色。
我认为这是最简单的解决办法。

1.使用以下链接www.example.com安装迷人https://glamorous.rocks/basics/#installation
2.之后，导入css到你的js文件，像这样..

import { css } from 'glamor';

3.之后，给予你自己的风格，以吐司弹出像这样。

toast.configure({
            autoClose:10000,
            draggable: true,
            hideProgressBar: true,
            position: toast.POSITION.TOP_CENTER,
              toastClassName: css({
                fontSize: '18px !important',
                backgroundColor: '#da1c36 !important',
                padding: '15px !important'
              }),
        });

关于（对于版本9.1.1）：

toast.info(msg, {
  position: 'top-right',
  autoClose: 15000,
  hideProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  draggable: true,
  progress: 0,
  progressStyle: { background: '#E8DFD0' },
  theme: 'colored',
  style: { background: '#766852' },
});

};

***如果您想更改不带CSS的。notify =（）=〉this.toastId = toast.error（'error'）{ error：“错误”，信息：“信息”，成功：“成功”，警告：“warning”，}像这样在其他人之上使用。

Toastify__toast--错误{背景色：红色; }**