Style in React Toast

4 Sep 20261 minute to read

Customize the appearance of React Toast components using CSS to match your application’s design system. The following CSS selectors target specific React Toast elements for theming and branding purposes.

Customizing the toast title

Use the following CSS to customize the default React Toast’s content properties like font-family, font-size and color.

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: red;
    font-size: 18px;
    font-weight: bold;
}

Customizing the toast content

Use the following CSS to customize the default React Toast’s content properties like font-family, font-size and color.

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: aqua;
    font-size: 13px;
    font-weight: normal;
}

Customizing the toast icon

Use the following CSS to customize the default React Toast icon color.

/* To change icon color */
.e-toast-container .e-toast .e-toast-icon {
    color: yellow;
}

Customizing the toast background

Use the following CSS to customize the default React Toast’s background color.

/* To change background color */
.e-toast-container .e-toast {
    background-color: navy;
}