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;

CodePudding user response：

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';