Skip to main content

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
Info

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.

react toastiy mobile