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
CodePudding user response:
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
CodePudding user response:
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