How to style
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.
:root {
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
--toastify-icon-color-info: var(--toastify-color-info);
--toastify-icon-color-success: var(--toastify-color-success);
--toastify-icon-color-warning: var(--toastify-color-warning);
--toastify-icon-color-error: var(--toastify-color-error);
--toastify-toast-width: 320px;
--toastify-toast-background: #fff;
--toastify-toast-min-height: 64px;
--toastify-toast-max-height: 800px;
--toastify-font-family: sans-serif;
--toastify-z-index: 9999;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
//Used only for colored theme
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
// Used when no type is provided
// toast("**hello**")
--toastify-color-progress-light: linear-gradient(
to right,
#4cd964,
#5ac8fa,
#007aff,
#34aadc,
#5856d6,
#ff2d55
);
// Used when no type is provided
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: var(--toastify-color-info);
--toastify-color-progress-success: var(--toastify-color-success);
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
// used to control the opacity of the progress trail
--toastify-color-progress-bgo: .2;
}
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)
/** Used to define container behavior: width, position: fixed etc... **/
.Toastify__toast-container {
}
/** Used to define the position of the ToastContainer **/
.Toastify__toast-container--top-left {
}
.Toastify__toast-container--top-center {
}
.Toastify__toast-container--top-right {
}
.Toastify__toast-container--bottom-left {
}
.Toastify__toast-container--bottom-center {
}
.Toastify__toast-container--bottom-right {
}
/** Classes for the displayed toast **/
.Toastify__toast {
}
.Toastify__toast--rtl {
}
.Toastify__toast-body {
}
/** Used to position the icon **/
.Toastify__toast-icon {
}
/** handle the notification color and the text color based on the theme **/
.Toastify__toast-theme--dark {
}
.Toastify__toast-theme--light {
}
.Toastify__toast-theme--colored.Toastify__toast--default {
}
.Toastify__toast-theme--colored.Toastify__toast--info {
}
.Toastify__toast-theme--colored.Toastify__toast--success {
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
}
.Toastify__toast-theme--colored.Toastify__toast--error {
}
.Toastify__progress-bar {
}
.Toastify__progress-bar--rtl {
}
.Toastify__progress-bar-theme--light {
}
.Toastify__progress-bar-theme--dark {
}
.Toastify__progress-bar--info {
}
.Toastify__progress-bar--success {
}
.Toastify__progress-bar--warning {
}
.Toastify__progress-bar--error {
}
/** colored notifications share the same progress bar color **/
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
}
/** Classes for the close button. Better use your own closeButton **/
.Toastify__close-button {
}
.Toastify__close-button--default {
}
.Toastify__close-button > svg {
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
}
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 _variables.scss
file.
scss
βββ _closeButton.scss
βββ _progressBar.scss
βββ _toast.scss
βββ _toastContainer.scss
βββ _variables.scss
βββ π animations
β βββ _bounce.scss
β βββ _flip.scss
β βββ _slide.scss
β βββ _zoom.scss
βββ main.scss
βββ minimal.scss
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β
The 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
<ToastContainer className="foo" style={{ width: "2000px" }} />
When displaying a notification you can also set some css classes:
- 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
toast("Custom style", {
className: "black-background",
bodyClassName: "grow-font-size",
progressClassName: "fancy-progress-bar",
});
Css classes as functionβ
You can also provide a function. This is what it looks like with tailwind css
const contextClass = {
success: "bg-blue-600",
error: "bg-red-600",
info: "bg-gray-600",
warning: "bg-orange-400",
default: "bg-indigo-600",
dark: "bg-white-600 font-gray-300",
};
const App = () => {
return (
<>
<Main />
<ToastContainer
toastClassName={(context) =>
contextClass[context?.type || "default"] +
" relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
}
bodyClassName={() => "text-sm font-white font-med block p-3"}
position="bottom-left"
autoClose={3000}
/>
</>
);
};
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.
import React from "react";
import styled from "styled-components";
import { ToastContainer } from "react-toastify";
const StyledContainer = styled(ToastContainer)`
// https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
&&&.Toastify__toast-container {
}
.Toastify__toast {
}
.Toastify__toast-body {
}
.Toastify__progress-bar {
}
`;
Pass css classes to propsβ
const StyledToastContainer = styled(ToastContainer).attrs({
className: "toast-container",
toastClassName: "toast",
bodyClassName: "body",
progressClassName: "progress",
})`
/* .toast-container */
width: 100%;
/* .toast is passed to toastClassName */
.toast {
background-color: var(--color-black);
}
button[aria-label="close"] {
display: none;
}
/* .body is passed to bodyClassName */
.body {
}
/* .progress is passed to progressClassName */
.progress {
}
`;
Styling from scratchβ
If you want to style from scratch simply include the bare minimum style and you are good to go.
import "react-toastify/dist/ReactToastify.minimal.css";
Individually stying toasts by IDβ
If you don't want a global style with ToastContainer you can try the following. In your custom toast make sure to provide a ToastId
export const MyCustomToast = () => {
return toast(MyCustomContentDiv, {
// your custom options
toastId: MyCustomToastId
}
}
// sample that will change the styling just for this toast id in the icon area. This css class is imported in the file where the custom toast is used.
div#MyCustomToastId .Toastify__toast-icon {
width: 60px;
background: #00BF91;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
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
import { injectStyle } from "react-toastify/dist/inject-style";
// CALL IT ONCE IN YOUR APP
injectStyle();
Mobileβ
On mobile, the toast will take all the available width.