3

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;
Josh
  • 65
  • 8

1 Answers1

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

DaveVanFleet
  • 573
  • 3
  • 10
  • I'm using "@mui/material": "^5.1.0". If there is a better way to go about this, how would I make this happen that's more beginner friendly? Even a link to a resource would be of great help – Josh Nov 13 '21 at 02:34
  • If you install the core package with `npm install @material-ui/core`, then change your import statement to what’s mentioned above it should work the way you have it. – DaveVanFleet Nov 13 '21 at 03:35
  • One of the confusing things when starting with mui is the different packages. Most will be from `@mui/material`, but occasionally you’ll use some from `@mui/system` or `@material-ui/core` – DaveVanFleet Nov 13 '21 at 03:38
  • Or if you want to use the newer styling engine in mui this part of the docs may be helpful https://mui.com/system/styled/ – DaveVanFleet Nov 13 '21 at 03:45
  • Ill take a look at that as well, thanks very much – Josh Nov 13 '21 at 03:57