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

最简单的解决方案

调整 Toastify BG 的最简单解决方案，或者实际上任何样式都是使用 ToastContainer 道具 toastStyle: 它接受 JSX 属性。导入必要的包后，在添加 ToastContainer 组件的同时，只需传入 toastStyle 道具即可。如果这有帮助，请告诉我。您也可以联系我获取详细说明。谢谢。

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

Answer 2

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

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

如果要求更为复杂，则可以按照this example在全球范围内实现自己的样式。

Answer 3

基于@Laurens的答案，我发现代码沙箱中的模式非常有用。这是我为获得下面显示的通知所做的

首先，我将Toast容器安装在{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Combine","attribute":null,"operator":null,"value":1,"is_value_processed":null,"aggregator":"all","conditions":[{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Product\\Subselect","attribute":"qty","operator":">=","value":"1","is_value_processed":null,"aggregator":"any","conditions":[{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Product","attribute":"sku","operator":"==","value":"100817069","is_value_processed":false,"attribute_scope":null},{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Product","attribute":"sku","operator":"==","value":"100817051","is_value_processed":false,"attribute_scope":null},{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Product","attribute":"sku","operator":"==","value":"100817561","is_value_processed":false,"attribute_scope":null},{"type":"Magento\\SalesRule\\Model\\Rule\\Condition\\Product","attribute":"sku","operator":"==","value":"100817579","is_value_processed":false,"attribute_scope":null}]}]}组件内部应用程序的根目录中

App

然后，对于每种通知样式，我定义了一系列CSS样式。组件看起来像这样

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

成功通知的样式如下所示

import { toast } from 'react-toastify';
import { css } from 'glamor';

export default {
  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.error(msg, {
      ...options,
      className: 'toast-info-container toast-info-container-after',
      progressClassName: css({
        background: '#07F',
      }),
    });
  },
};

您还会注意到，我不得不在CSS中粘贴一系列.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; }

Answer 4

**如果要更改不带CSS的代码。 notify =（）=> this.toastId = toast.error（'error'）{错误：“错误”，信息：“信息”，成功：“成功”，警告：“警告”，}像上面这样使用 OtherWise。

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

Answer 5

1。使用以下链接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'
              }),
        });

Answer 6

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

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

customColor变量将从您的商店中删除，并且可以动态更新，从而为您提供自定义的吐司背景颜色。

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

调整React Toastify Toast背景颜色的最简单方法

6 个答案:

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