Material UI：TypeError：无法读取未定义的属性（读取“向上”）答案

【问题标题】：Material UI: TypeError: Cannot read properties of undefined (reading 'up')Material UI：TypeError：无法读取未定义的属性（读取“向上”）
【发布时间】：2021-12-01 08:52:44
【问题描述】：

我有这个组件，我正在尝试使用“断点”，但我收到此错误，请注意我使用的是最新版本的材料：

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) => ({
  root: {
    [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
      minHeight: 600,
    },
  },
}));

const ResponsiveContainerGrid: FC = ({  children }) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

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) => ({
  root: {
    [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
      minHeight: 600,
    },
  },
}));

const ResponsiveContainerGrid: FC = ({  children }) => {
  const classes = useStyles();

  return (
    <div>
      <Grid
        className={classes.root}
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

但是我遇到了一个问题，就是：

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

如何解决第一个或第二个问题？

【问题讨论】：

问题解决了吗？
不，没有解决

标签： reactjs material-ui

【解决方案1】：

删除 node_modules 文件夹，然后通过运行清除 NPM 和/或 Yarn 缓存：

对于 NPM 做：npm cache clean --force
对于 Yarn 来说：yarn cache clean --force
接下来，使用 npm 或 yarn 重新安装所有软件包。这解决了我的问题

【讨论】：