Блог

У меня есть этот компонент, и я пытаюсь использовать «точку останова», но я получаю эту ошибку, обратите внимание, что я использую последнюю версию материала:

 Property 'breakpoints' does not exist on type 'DefaultTheme'  

файл.tsx:

 import { Grid } from "@mui/material"; import { makeStyles } from '@mui/styles'; import { FC } from "react"; import ResponsiveConstants from "./ResponsiveConstants";  const useStyles = makeStyles((theme) =gt; ({  root: {  [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {  minHeight: 600,  },  }, }));  const ResponsiveContainerGrid: FC = ({ children }) =gt; {  const classes = useStyles();   return (  lt;divgt;  lt;Grid  className={classes.root}  container  direction="row"  justifyContent="center"  alignItems="center"  gt;  {children}  lt;/Gridgt;  lt;/divgt;  ); };  export default ResponsiveContainerGrid;  

Затем я попытался изменить код и использовал следующую инструкцию:

 import { Theme } from '@mui/system';  

И код стал:

 import { Grid } from "@mui/material"; import { makeStyles } from '@mui/styles'; import { FC } from "react"; import ResponsiveConstants from "./ResponsiveConstants"; import { Theme } from '@mui/system';  const useStyles = makeStyles((theme: Theme) =gt; ({  root: {  [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {  minHeight: 600,  },  }, }));  const ResponsiveContainerGrid: FC = ({ children }) =gt; {  const classes = useStyles();   return (  lt;divgt;  lt;Grid  className={classes.root}  container  direction="row"  justifyContent="center"  alignItems="center"  gt;  {children}  lt;/Gridgt;  lt;/divgt;  ); };  export default ResponsiveContainerGrid;  

Но у меня была проблема, которая заключается в:

 TypeError: Cannot read properties of undefined (reading 'up')  

Как я могу решить первую или вторую проблему?