Question

0

185

Vistas

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

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-30T06:25:14.892Z

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

Answer 2 · 2022-06-30T06:25:14.901Z

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

0

185

Trying to add style on react toastify

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT