He tomado la referencia de esta pregunta para crear puntos de interrupción y en mi aplicación he usado GridList . Estoy dando un número de columnas basado en el ancho de la pantalla.

Código para determinar el número de columnas:

 function getCols(screenWidth) { if (isWidthUp('xl', screenWidth)) { return 5; } if (isWidthUp('lg', screenWidth)) { return 4; } return 4; }

código para puntos de interrupción y otros estilos personalizados:

 const BREAKPOINTS = { xs: 0, sm: 600, md: 960, lg: 1024, xl: 1280 }; const breakpointsValues = { breakpoints: { values: BREAKPOINTS } }; const theme = createMuiTheme({ palette, overrides, typography: { "fontFamily": `Montserrat`, "fontSize": 14, "fontWeightLight": 350, "fontWeightRegular": 450, "fontWeightMedium": 550 }, ...breakpointsValues });

El problema es cuando estoy inspeccionando y usando la barra de herramientas del dispositivo, cada vez que cambio el ancho, el tamaño de la pantalla se consola correctamente, pero cuando cambio la resolución de la configuración del dispositivo a 1024 * 768 o cualquier otra resolución cada vez que el ancho de la pantalla se imprime como " SG".

Busqué en los documentos y el foro, pero no pude encontrar ninguna solución.