[docs] Custom breakpoints breaks other components

[karolis-666]

Related page

https://mui.com/material-ui/customization/breakpoints/#custom-breakpoints

Kind of issue

Missing information

Issue description

Using custom breakpoints with module augmentation breaks other components, like Grid2 for example. When rendered it does not provide correct breakpoints.

So now if I provide <Grid2 size={{ xs: 12, md: 4 }}> it will throw TS error, but breakpoints are rendered correctly

When <Grid2 size={{ mobile: 12, laptop: 4 }}> is used, no TS error, but renders incorrectly.

Grid2 is just an example. This issue is visible with more components as well. Based on docs if I can rename breakpoints or use more of them as I want I expected other MUI components will be aware of this

Context

Example of breakpoints declaration

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true;
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

export const breakpoints = {
  values: {
    mobile: 0,
    tablet: 500,
    laptop: 1200, 
    desktop: 1400, 
  },
};

Example of createTheme

  const theme = useMemo(
    () =>
      responsiveFontSizes(
        createTheme({
          cssVariables: true,
          palette: {
            mode: themeMode,
            ...palette[themeMode],
          },
          shadows,
          ...breakpoints,
          ...components,
          ...typography,
          ...shape,
        }),
      ),
    [themeMode],
  );

Search keywords: breakpoints