MUI 断点无法识别“theme.breakpoints.down”

Question

目标：当断点为平板电脑及以下时隐藏 navMenu，以便我可以用汉堡菜单替换

在 VS 代码的终端中，它说编译成功，但在浏览器中我看到：

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

我在这里尝试了说明：StackOverflow Question，但没有运气。

有人能指出正确的方向吗？

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  navMenu: {
    [theme.breakpoints.down('md')]: {
      display: "none",
    },
  },
}));

const Navbar = () => {
  const classes = useStyles();

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" style={{ backgroundColor: "#061B2E" }}>
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Name
          </Typography>
          <Box className={classes.navMenu}>
            <Button color="inherit">Item 1</Button>
            <Button color="inherit">Item 2</Button>
            <Button color="inherit">Item 3</Button>
            <Button color="inherit">Item 4</Button>
          </Box>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

export default Navbar;

Answer 1

很好的问题，您使用的是哪个版本的 MUI？他们有点从makeSyles 转向样式化组件，但仍然支持这种方法（我们仍然只在我的团队中使用它）。您可能需要将您的导入语句更改为import { makeStyles } from '@material-ui/core';