javascript - 如何在更新时更改 toastify 加载 bg

Question

我想更改通知的背景颜色。我该怎么做。我使用 Tailwind 作为 CSS 框架。

它使用 bg-white 显示加载和成功/错误通知

class App extends Component {
  orderHandler = () => {
    toast.loading("Please wait",{
      position: toast.POSITION.TOP_CENTER,
      progressClassName: 'success-progress-bar',
      toastId: 2
    });
    axios
      .get("https://restcountries.com/v3.1/all")
      .then((response) => {
        console.log(response);
        toast.update(2, { render: "done", type: "success", hideProgressBar: true, autoClose:1000, isLoading: false });
      })
      .catch((error) => {
        console.log(error);
        toast.update(2, { render: "error", type: "error", isLoading: false });
      });
  };
  render() {
    return (
      <div>
        <button onClick={this.orderHandler}>click</button>
        <ToastContainer/>
      </div>
    );
  }
}

export default App;

Answer 1

您可以使用以下代码更改背景颜色方法
1

<ToastContainer
  toastStyle = {{ backgroundColor: "red", color: "#FFF"}}
/>

方法 2 在你的css 文件中，你可以在 css 样式下面写

.Toastify__toast--success {
  background: #00c781 !important;
  color: #FFF !important;
  font-weight: 200;
}

.Toastify__toast--error {
  background: red !important;
  color: #FFF !important;
  font-weight: 200;
}