cssreactjstoast

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


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.


Solution

  • 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

    enter image description here

    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