调整 react-toastify Toast 背景颜色的最简单方法

Question

我这样试过，但没有任何效果：

const myToast = () => (
  <div style={{backgroundColor: myColors.green}}>
    ...some text content...
  </div>
)

然后在App.js

class App extends Component {
  showMyToast = () => {
          toast(<MyToast />, {
            closeOnClick: false,
            toastId: 'my_toast',
            autoClose: true,
            closeButton: false,
            position: toast.POSITION.BOTTOM_CENTER,
            className: 'toast'
          })          
  }
}

我看到一个白色的吐司，上面写着我的文字。

Answer 1

您可以使用 Glamor 轻松调整吐司背景颜色等简单内容。
This example 使用 glamor 显示带有绿色背景的简单吐司。

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

如果要求更复杂，您可以根据 this example.

在全局范围内实施您自己的样式

Answer 2

根据@Laurens 的回答，我发现代码沙箱中的模式非常有用。这是我为收到如下所示的通知所做的操作

首先，我将我的 toast 容器安装在我的应用程序的根目录下，在我的 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

Answer 3

**如果你想改变没有CSS。 notify = () => this.toastId = toast.error('error') { 错误："error"，信息："info"，成功："success"，警告: "warning", } 像上面这样使用否则 .

Toastify__toast--error{ 背景颜色：红色； }**

Answer 4

1.install魅力四射linkhttps://glamorous.rocks/basics/#installation

2.after 像这样将 css 导入到你的 js 文件中..

import { css } from 'glamor';

3.after 像这样给 toast 弹出窗口赋予你自己的风格..

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

Answer 5

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

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

customColor 变量将从您的商店中提取出来，并可以即时更新，为您提供自定义的 toast 背景颜色。

我认为这是最简单的解决方案。

Answer 6

最简单的解决方案

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

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

Answer 7

最简单的解决方案是设置 theme 属性，如 the docs 中所述。您可以：

全局设置主题

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

或定义每个吐司

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

这会根据 toast 类型（error、warning、info 等）更改背景颜色。希望这对以后的任何人都有帮助。

调整 react-toastify Toast 背景颜色的最简单方法

Simplest way to adjust background color of a react-toastify Toast

css

toast

reactjs

Toastify__toast--error{ 背景颜色：红色； }**