reactjs - TypeError：无法读取材料 ui 中未定义的属性（读取“断点”）

Question

我正在尝试在 Material UI (React Project) 中使用断点。我正在使用 Material UI v5.0.1

const useStyles = makeStyles((theme) => ({
  gridRight: {
    width: "50%",
    height: "350px",
    backgroundColor: "black",
    opacity: 0.3,
    borderRadius: 20,
    padding: 10,
    color: "white",
    [theme.breakpoints.down("md")]: {
      width: "100%",
    },
  },
}));

但我得到了错误： TypeError: Cannot read properties of undefined (reading 'breakpoints')

我也尝试过使用，ThemeProvider但错误仍然存​​在。另外，我检查了 Material Ui 文档中的默认用法，错误仍然是未定义的断点。

完整代码

import "./welcome.css";
import * as React from "react";
import { Typography, Grid } from "@mui/material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  gridRight: {
    width: "50%",
    height: "350px",
    backgroundColor: "black",
    opacity: 0.3,
    borderRadius: 20,
    padding: 10,
    color: "white",
    [theme.breakpoints.down("md")]: {
      width: "100%",
    },
  },
}));

const Welcome = () => {
  const PF = process.env.REACT_APP_PUBLIC_FOLDER;
  const classes = useStyles();

  return (
    <div
      style={{
        backgroundImage: `URL(${PF + "back.jpg"})`,
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover",
        height: "calc(100vh)",
      }}
    >
      <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
        <Grid item xs={12} md={6}>
          <div className={classes.gridLeft}>
            <Typography>Side One </Typography>
          </div>
        </Grid>

        <Grid item xs={12} md={6}>
          <div className={classes.gridRight}>
            <Typography>Side Two </Typography>
          </div>
        </Grid>
      </Grid>
    </div>
  );
};

export default Welcome;

标签： reactjsmaterial-ui