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

Question

Goal: Hide navMenu when breakpoint is tablet and under, so I can replace with a hamburger menu

In terminal in VS code, it says compiled successfully, but in the browser I see:

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

I tried instructions here: StackOverflow Question , with no luck.

Can someone point me in the right direction?

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

Great question, which version of MUI are you using? They're kind of shifting away from makeSyles in favor of styled components, but this method is still supported (we still use it exclusively on my team). You may need to change your import statement to import { makeStyles } from '@material-ui/core';

Answer 2

这是有关断点的文档，因为您似乎正在使用 material-ui v5（现在称为 mui） https://mui.com/customization/breakpoints/#main-content