material-ui: [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.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 11
Comments: 18 (12 by maintainers)

Most upvoted comments

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 }}.

robphoenix on Apr 22, 2022

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.

mnajdova on Apr 22, 2022

hoping this solution finds its way to prod. it would really make the grid system more flexible and granular.

githubjosh on Jan 7, 2022

Hi @oliviertassinari, @mnajdova could you please review the PR, thanks a lot!

boutahlilsoufiane on Apr 3, 2022

Hi @oliviertassinari, @mnajdova I will work on this.

boutahlilsoufiane on Mar 13, 2022

Hi @mnajdova, I appreciate your effort, could you please review the PR? Thanks a lot for your precious time!

boutahlilsoufiane on May 11, 2022

@mnajdova Grid is not using exactPropTypes so I had assumed that we don’t need to do anything about the prop-types.

have one prop for defining these values under an object

The downside is with the boilerplate it adds. Developers have more to read and write.

oliviertassinari on May 19, 2021

I had a quick look, this could be the beginning of a solution:

diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts
index 0e22aba479..bfe4866aa5 100644
--- a/packages/material-ui/src/Grid/Grid.d.ts
+++ b/packages/material-ui/src/Grid/Grid.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SxProps, SystemProps } from '@material-ui/system';
+import { Breakpoint } from '../styles/createBreakpoints';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { GridClasses } from './gridClasses';
@@ -12,6 +13,8 @@ export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';

 export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

+export type GridExtraBreakpoints = Partial<Record<Breakpoint, boolean | GridSize>>;
+
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     SystemProps & {
@@ -98,7 +101,7 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default false
        */
       zeroMinWidth?: boolean;
-    };
+    } & GridExtraBreakpoints;
   defaultComponent: D;
 }

But we could likely do better by supporting removed breakpoints.

oliviertassinari on May 19, 2021