[docs][Alert] Missing root slot for style customization

[LeahMaier]

Summary

Currently, the MuiAlert component does not support the paper slot for direct styling customization int the theme file. Other MUI components, such as MuiAutocomplete, use the slotProps API to allow passing specific props to subcomponents like paper. Adding support for this in MuiAlert would simplify the application of custom Paper variants and other styles directly to the alert’s underlying Paper element.

Examples

MuiAlert: {
  defaultProps: {
    slotProps: {
      paper: {
        variant: 'overlay',  // Apply the overlay variant directly to the paper slot
      },
    },
  },
  styleOverrides: {
    // Default styles for MuiAlert can still be used
  },
}

Motivation

1. Simplified Styling: Currently, developers need to override styleOverrides to apply specific styles such as custom Paper variants. Introducing the paper slot would allow this styling to be applied more easily through the slotProps API, similar to other components like MuiAutocomplete. This would streamline styling customization and reduce the need for manual overrides.
2. Consistency with Other Components: Other components in MUI, such as MuiAutocomplete, support the slotProps API to customize internal elements (e.g., paper). Adding this capability to MuiAlert would align the API across different MUI components, enhancing consistency and developer experience.
3. Improved Maintainability: By allowing developers to pass props directly to the paper element (e.g., variant: 'overlay'), this approach reduces the need for duplicate code and manual style overrides, making the codebase easier to maintain and less prone to errors.

Search keywords: alert, slot, defaultProps, paper variant

[mnajdova]

We are consolidating the slots and slotProps API right now, so we will look into this. @siriwatknp can likely provide more info/timeline on when this would be available.

[siriwatknp]

For Alert, the Paper is used as the root slot so you should target root slot instead:

MuiAlert: {
  defaultProps: {
    variant: 'overlay',  // Apply the overlay variant directly to the paper slot
  },
  styleOverrides: {
    root: {
      variants: [
        { props: { variant: 'overlay', style: { … } } },
      ]
    }
  },
}

[siriwatknp]

I marked this as docs improvement.

[LeahMaier]

Thank you for the message and the suggestion. Unfortunately, it doesn't help in my case yet.

[siriwatknp]

Thank you for the message and the suggestion. Unfortunately, it doesn't help in my case yet.

Based on your provide code, it should work. What else missing? please explain in more details.

[LeahMaier]

So this is my original code:

MuiAlert: {
  defaultProps: {
    iconMapping: { success: <CheckCircle />, info: <Info />, warning: <Warning />, error: <Error /> },
  },
  styleOverrides: {
    root: ({ theme }) => ({
      ...getPaperVariantOverlay(theme),
    }),
  },
},

In the MuiPaper I define the "overlay" variant, which also calls getPaperVariantOverlay():

MuiPaper: {
  styleOverrides: {
    root: ({ theme }) => ({
      variants: [
        {
          props: { variant: 'overlay' },
          style: getPaperVariantOverlay(theme),
        },
      ],
    }),
  },
},

Instead of calling ...getPaperVariantOverlay(theme) in the MuiAlert I want to set the variant "overlay". If I do it the way you suggest it looks like this:

MuiAlert: {
  defaultProps: {
    iconMapping: { success: <CheckCircle />, info: <Info />, warning: <Warning />, error: <Error /> },
  },
  styleOverrides: {
    root: {
      variants: [
        { props: { variant: 'overlay' } },
      ]
    },
  },
},

then the Alert is not styled like it was before:

Before:

Do you understand better now?