Customize toaster from react-toastify

user_14806154 0
Viewed 4461

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?

react-toastify reactjs toast css javascript
2 Answers

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.

user_101853260
user_74047300
Related