Override css variables
Below the list of the css variables that are exposed by the library. You can accomplish a lot by overriding some of them.
Override existing css classes
If overriding the css variables is not enough for you, you can override the existing CSS classes. Below, a list of the CSS classes used(classes used for animation and media query are omitted)
Build your own style using the scss files
Grab the scss directory of the repository and build your own stylesheet. If you just want to change some colors, most of them are defined inside the
You built an amazing theme and you want to share it with the community, please let me know. Contributions are welcome!
Passing css classes to component
ToastContainer accept the following props for styling:
- className: applied to the container
- toastClassName: applied on the toast wrapper
- bodyClassName: applied on the toast body
- progressClassName: applied on the progress bar
- style: inline style applied to the container
When displaying a notification you can also set some css classes:
- className: applied on the toast wrapper (this override
toastClassNameis set by the container )
- bodyClassName: applied on the toast body (this override
bodyClassNameis set by the container )
- progressClassName: applied on the progress bar (this override
progressClassNameis set by the container )
- style: inline style applied to the toast
Css classes as function
You can also provide a function. This is what it looks like with tailwind css
How to style with styled-components
Extend existing css classes
You can override the css classes with
styled-components. You can find the list of the css classes used here. This is where you will also define the style for your notification.
Pass css classes to props
Styling from scratch
If you want to style from scratch simply include the bare minimum style and you are good to go.
Inject style on demand
If you don't have a css loader or you want to inject the style on demand(convenient with css module), the library provide a helper for that
On mobile, the toast will take all the available width.