how to change toastify loading bg while updating

Question

I want to change bg-color of the notification. How can I do it .I am using Tailwind as css fram-work.

it shows loading and success/error notification with 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

you can use below code to change the bg color
method1

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

method2 In your css file you can write below css style

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

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