CODEWITHSUNDEEP
reactjssassreact-toastify
reduce10
reduce10

Reputation: 1

how to customize react-toastify

I need to customize react-toastify.

I tried to follow the advice from the documentation and change the styles in the .scss file. unfortunately this didn't work. tell me what am I doing wrong? I want notifications to look like on the picture how I want it to look

Upvotes: 0

Views: 1199

Answers (2)

Sujith Kumar
Sujith Kumar

Reputation: 623

Add a style attribute like this:

     <ToastContainer
        position="bottom-right"
        autoClose={8000}
        pauseOnHover={true}
        draggable={true}
        theme="dark"
        style={{width: "100px"}}
      />

Upvotes: 0

Sujith Kumar
Sujith Kumar

Reputation: 623

You can use this method in App.js :

   <ToastContainer
       position="bottom-right"
       autoClose={8000}
       pauseOnHover={true}
       draggable={true}
       theme="dark"
    />

here the toast appears on the bottom-right side, it is automatically closed after 8 seconds and its background theme is dark.

Upvotes: 0

Related Questions