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

Easiest Solution

The easiest solution to adjust the BG of Toastify, or in fact any styles would be to use the ToastContainer props toastStyle: which takes in JSX attributes. After importing the necessary packages , while adding the ToastContainer component , just pass in the toastStyle prop and you shall be good to go.

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

Based on @Laurens answer I found the pattern in the code sandbox very useful. Here's what I did to get the notification shown below

First, I mounted my toast container at the root of my App, inside my App component

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

Then, for each notification style, I defined a series of CSS styles. The components looked like so

// 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;

To use these just do import customToast from 'customToast.js'. Now you can use customToast.success, customToast.error etc

The style for the success notification is shown below

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

You'll also notice that I had to stick a series of !importants in my css

The easiest solution is setting the theme property, as mentioned in the docs. You can:

Set theme globally

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

Or define per toast

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

This changes the background color based on the toast type (error, warning, info etc). Hopefully this helps anyone in future.

You can use Glamor for easily adjusting simple things like toast background color.
This example displays a simple toast with a green background using glamor.

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

If the requirements are more complex you can implement your own styles globally as per this example.

You can simply override it in CSS if the color is a hardcoded value. However, you could also use Helmet if the color needs to be variable e.g. as an app theme color that can change through user preferences or something. Looking at your example, you would include

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

The customColor variable would be pulled out of your store and could be updated on the fly, giving you a custom toast background color.

I think this is the simplest solution.

1.install glamorous using following link https://glamorous.rocks/basics/#installation

2.after that import css to your js file like this..

import { css } from 'glamor';

3.after that give your own style to the toast popup like this..

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

• **If you want change the without CSS. notify = () => this.toastId = toast.error('error') { error: "error", info: "info", success: "success", warning: "warning", } Use like this Above OtherWise .

  Toastify__toast--error{ background-color: red; }**