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

Question

I tried it like this but it doesn't do anything:

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

Then in 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'
          })          
  }
}

I'm seeing a white toast with my text on it.

Answer 1

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" }} />

Answer 2

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

Answer 3

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.