'Trying to add style on react toastify

I am trying to add custom style on react toastify, firstly I have import these

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

than call the react toast:

 const handleToast = () => {
        toast("sent mail")
    }

Here i adding css in toast container :

<div>
            <ToastContainer toastStyle={{
                marginTop: "4rem",
                borderRadius: "20px",
                backgroundColor: "red"
            }} />
            <button onClick={handleToast} className='btn btn-info'>Click here</button>
        </div >

But in ToastContainer component css not working. Thanks in advance

javascriptcssreactjsreact-toastify


Solution 1:[1]

You can try adding the styles to a root/global CSS file. The classNames you'd use would mainly be: .Toastify .Toastify__toast-container .Toastify__progress-bar .Toastify__toast .Toastify__toast-body

Solution 2:[2]

Your problem is not clear to me. I believe you want to style the toast itself. If so, you can easily do it by adding classes like this,

toast("Sent mail",{
      className: 'black-background',
      bodyClassName: "grow-font-size",
      progressClassName: 'fancy-progress-bar'
    });

You can add your preferred classnames on global css file, and apply your desired styles there. Here,

  • className: applied on the toast wrapper (this override toastClassName is set by the container )
  • bodyClassName: applied on the toast body (this override bodyClassName is set by the container )
  • progressClassName: applied on the progress bar (this override progressClassName is set by the container )
  • style: inline style applied to the toast

Also if you want to style the ToastContainer, you can do it the same way.

 <ToastContainer toastClassName="foo" style={{ width: "2000px" }} />
  • toastClassName: applied on the toast wrapper
 <ToastContainer className="foo" style={{ width: "2000px" }} />

To know more about how to style it in a different way, you can check out there documentation on styling from here How to style

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Caleb Okai
Solution 2

Related Questions