Styling

Styling can be done in a few different ways. We will run through all the options here.

Styling with the MUI Theme

Styling can be done globally via the MUI theme. This way every toast will have the same styling.

MUI lets you target the different variants of the toast, so you can style them differently.

For example you can style all the filled success toasts to have a red background color.

const theme = createTheme({
    components: {
        MuiAlert: {
            styleOverrides: {
                filledSuccess: {
                    backgroundColor: "red",
                },
            },
        },
    },
});

Check out the MUI documentation (opens in a new tab) for more information on theming.

• Alert (opens in a new tab)
• AlertTitle (opens in a new tab)

Styling with the Toaster

Styling can be done globally via toastOptions, this way every toast will have the same styling.

• You can style the Alert component for all toasts
• You can style the CloseButton ActionButton and Description for all different types of toasts.

<Toaster
  toastOptions={{
    alertSx: {
        backgroundColor: "red",
    },
    success:{
        closeButtonSx: {
            color: "red",
        }
        actionButtonSx: {
            color: "red",
        }
        descriptionSx: {
            color: "red",
        }  
    },
    loading:{
        closeButtonSx: {
            color: "red",
        }
        actionButtonSx: {
            color: "red",
        }
        descriptionSx: {
            color: "red",
        }  
    }
    // ... and so on
  }}
/>

Styling with the toast

You can also use the same props when calling toast to style a specific toast.

toast('Hello World', {
});

Changing Icons

You can change the default icons using the toasterOptions on the Toaster component. This will change the default icons for all toasts, for their respective toast types.

<Toaster
  toasterOptions={{
    success: {
        icon: <SuccessIcon/>
    },
    info: {
        icon: <InfoIcon/>
    },
    // ... and so on
  }}
/>

You can also set an icon for each toast:

toast('Hello World', {
  icon: <Icon />,
});

You can also set a toast to hide the icon:

toast('Hello World', {
  hideIcon: true,
});