Some error or problem with mui theme creation in typescript? (Why not response me?)

[siamahnaf]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

import { createTheme } from '@mui/material/styles';

declare module '@mui/material/styles' {
    interface BreakpointOverrides {
        xs: true;
        sm: true;
        msm: true;
        lsm: true;
        smd: true;
        md: true;
        lg: true;
        xxl: true;
    }
}
const theme = createTheme({
    breakpoints: {
        values: {
            xs: 0, // Extra Small Devices ---- Defualt BreakPoints
            sm: 480, // Small Devices ---- Default BreakPoints
            msm: 576, // Medium Small Medium Devices
            lsm: 640, // Large Small Medium Devices
            smd: 768, // Small Medium Devices
            md: 992, // Medium Devices ---- Default BreakPoints
            lg: 1200, // Large Devices  ---- Default BreakPoints
            xxl: 1536, // Large Devices
        },
    }
});
export default theme;

Then why can't I use this custom breakpoint in Grid components? Why give it an error message? How can I solve it?

Here is the usage-

const Home: NextPage = () => {
  return (
    <Box>
      <Seo />
      <Siam />
      <Grid container spacing={0}>
        <Grid item smd={6}><Movies /></Grid> // In this line I am getting error for adding smd
        <Grid item smd={6}><Books /></Grid> // In this line I am getting error for adding smd
      </Grid>
    </Box>
  );
};
export default Home;

Here is the error message-

No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any>; } & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses> | undefined; ... 14 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps & Omit<...>): Element', gave the following error. Property 'component' is missing in type '{ children: Element; item: true; smd: number; }' but required in type '{ component: ElementType<any>; }'. Overload 2 of 2, '(props: DefaultComponentProps<GridTypeMap<{}, "div">>): Element', gave the following error. Type '{ children: Element; item: true; smd: number; }' is not assignable to type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses> | undefined; ... 14 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps & Omit<...>'. Property 'smd' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; classes?: Partial<GridClasses> | undefined; ... 14 more ...; zeroMinWidth?: boolean | undefined; } & CommonProps & Omit<...>'.ts(2769) OverridableComponent.d.ts(17, 7): 'component' is declared here.

Here are the error images-

[siriwatknp]

The custom breakpoints on Grid are not working well in typescript. There are ongoing efforts to make it works in:

• [system] Add new Grid implementation #32746
• [Grid] Support customized breakpoints #31998