梅断点不识别"theme.breakpoints.down“

Question

目标:当断点在平板和以下时隐藏navMenu，所以我可以用汉堡包菜单代替

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

TypeError:无法读取未定义的属性(读取'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';