CODEWITHSUNDEEP
javascriptcssreactjstoastreact-toastify
Jean Pierre
Jean Pierre

Reputation: 321

Customize toaster from react-toastify

I'm using this toaster, it works fine but I'm struggling to change it's style.

This is my code so far:

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Thanks! We saved your changes.!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer 
          className="toaster-container"
          position="top-right"
          autoClose={111111100}
          hideProgressBar={true}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover/>
      </div>
    );
  }

I want to make it look like this:

enter image description here

Added a css class, (className="toaster-container") I can see it in inspect mode, it is the container that has a div, which has another div inside and there is the actual toaster.

I can change the text but cannot make bold only a part of it like in the above picture neither to add an icon there.

Any suggestions?

Upvotes: 2

Views: 14144

Answers (3)

Tabi
Tabi

Reputation: 109

This is old, but maybe I can help someone.

This is working on react-toastify 8.2.0 with react 16.9.0.

First, I use css files for override styles:

.Toastify__toast-container {
  z-index: 1200 !important;
}

@media only screen and (max-width: 480px){
  .Toastify__toast-container > .Toastify__toast:not(:last-child) {
    margin-bottom: 0.5em !important;
  }
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  background-color: #104eb2 !important;
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  background-color: #18cc48 !important;
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  background-color: #fcc52c !important;
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  background-color: #FE685E !important;
}

@media only screen and (min-width: 480px){
  .Toastify__toast-container--bottom-left {
    bottom: 3.5em !important; 
  }
}

You can see the style you need in How to style - react-toastify

Then, in the project I am working currently, we do not use css files too much, usually we use makeStyles hook from material-ui, so I did something like this:

import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import { toast, ToastContainer } from 'react-toastify';

const CustomToastContainer = () => {
  const classes = useStyles();

  return (
    <ToastContainer
      className={({ defaultClassName }) =>
        clsx(defaultClassName, classes.toastContainer)
      }
      toastClassName={({ type, defaultClassName }) =>
        clsx(defaultClassName, classes[type])
      }
      rtl={false}
      autoClose={3000}
      pauseOnHover
      position={toast.POSITION.BOTTOM_LEFT}
      theme="colored"
      limit={3}
      pauseOnFocusLoss
      newestOnTop
    />
  );
};

const useStyles = makeStyles(theme => ({
  toastContainer: {
    zIndex: 1200,
    [theme.breakpoints.up(theme.breakpoints.values.sm)]: {
      bottom: '3.5em !important'
    },
    '& > .Toastify__toast:not(:last-child)': {
      marginBottom: '0.5em !important'
    }
  },
  success: {
    backgroundColor: `${theme.palette.success.main} !important`
  },
  info: {
    backgroundColor: `${theme.palette.primary.main} !important`
  },
  error: {
    backgroundColor: `${theme.palette.error.main} !important`
  },
  warning: {
    backgroundColor: `${theme.palette.warning.main} !important`
  }
}));

clsx(defaultClassName, classes.toastContainer) is equivalent to concat defaultClassName with your own style classes, e.g. ${defaultClassName} ${classes.myClass}.

defaultClassName is the variable which store the default styles mentioned on the link aboved, so, is like override them. I used !important in my makeStyle styles, but I do not sure if is really necessary. So, you can try.

Upvotes: 0

Fernando Lopes
Fernando Lopes

Reputation: 742

After struggling for some time on this, I found the solution in docs.

const notify = () =>    
  toast(<MyComponent title={title} description={description} />);
);

That way it appliess all style of your component

https://fkhadra.github.io/react-toastify/render-what-you-want

Upvotes: 1

itaydafna
itaydafna

Reputation: 2086

It looks like you can pass JSX into the toast function so you can this to break up and style your inner design in combination with using css to run-over the outer toast css. This will also allow you to insert the icon wherever you like in this inner markup. Something like this:


const notify = () =>
    toast(
      <div style={{ height: "100%", borderLeft: "5px solid green" }}>
        {/* insert your icon here */}
        <span style={{ fontWeight: "bold", color: "#000" }}>Success</span>{" "}
        Default address update
      </div>
    );

Check out this sandbox to see how you can play around with the JSX and the main css (style.css) file in order to get something close to what the screenshot you shared.

Upvotes: 3

Related Questions