[Grid] Add support for new breakpoints

I need to add xxl breakpoint, I followed the docs to create a custom breakpoint, however, when i use the Grid component it gives me a TS warning.

using the "@material-ui/core": "^5.0.0-alpha.33"

<Grid item xxl={1} xl={2}>

here is the custom breakpoint code

// override the BreakpointOverrides  interface
declare module '@material-ui/core/styles' {
  interface BreakpointOverrides {
    xs: true;
    sm: true;
    md: true;
    lg: true;
    xl: true;
    xxl: true;
  }
}


const baseOptions: ThemeOptions = {
  breakpoints: {
    keys: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
    values: {
      xs: 0,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
    },
  },
};

Please advice me where i’m doing wrong.

[mnajdova]

I’ve just did a review, sorry for the delay. It’s important that we resolve https://github.com/mui/material-ui/pull/31998#pullrequestreview-949788800 before moving forward.

[robphoenix]

For anyone else banging their head against a brick wall that has ended up here looking for a workaround to this issue, this is what ended up working for me…

<Grid
    item
    columns={{ mobile: 4, tablet: 8, desktop: 12 }}
    {...{ mobile: 4, tablet: 4, desktop: 8 }}
    >

On every Grid component you have to specify the columns you want for your custom breakpoints (columns={{ mobile: 4, tablet: 8, desktop: 12 }}), so it’ll be worth creating a wrapper. You then have to add a prop with the name of your breakpoint and the value you want, ie desktop={8}, however TypeScript doesn’t like this as these props don’t exist on the MuiGrid component, which is why I’ve used {...{ mobile: 4, tablet: 4, desktop: 8 }}. This will also work as expected if you only specify some of the breakpoints; {...{ tablet: 4 }}.