[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

[oleksandr-danylchenko]

I'm having the same issue in the theme.breakpoints.up/down function - #30152 (comment)

[karolis-666]

Closing this issue

Problem was that TS failed to inform, that ...breakpoints could not be spread the way I declared breakpoints and it didn't caught my eye

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @karolis-666! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!