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
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 correctlyWhen
<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 thisContext
Example of breakpoints declaration
Example of createTheme
Search keywords: breakpoints