Customize toaster from react-toastify

79
July 02, 2021, at 10:30 PM

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:

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?

Answer 1

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.

READ ALSO
Training the model gives ValueError when I add class weights

Training the model gives ValueError when I add class weights

I was using multi class U-Net segmentation where I am encountering value error while training by data modelMy multi class model is divided into 4 classes

100
(Discord.js) Making a bot click a button that another bot has created

(Discord.js) Making a bot click a button that another bot has created

Okay, so my goal is to have a discord bot click the button that another discord bot has created

121
How to update an app in Google play console if you lost a key?

How to update an app in Google play console if you lost a key?

Here's the problem: I transfered an ownership of my app to other dude, and now he's facing a problem with updating it (I lost the key that I used to sign AAB-file)We had already wrote an email to Play Console support

132