Style in Angular Toast component
4 Apr 20231 minute to read
The following content provides the exact CSS structure that can be used to modify the component’s appearance based on the user preference.
Customizing the toast title
Use the following CSS to customize the default 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 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 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 toast’s background color.
/* To change background color */
.e-toast-container .e-toast {
background-color: navy;
}