MUI 斷點無法識別“theme.breakpoints.down”

Question

目標：當斷點位於平板電腦及下方時隱藏導航菜單，以便我可以用漢堡包菜單替換

在 VS 代碼的終端中，它說編譯成功，但在瀏覽器中我看到：

類型錯誤：無法讀取未定義的屬性（讀取“向下”）

我在這里嘗試了說明： 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';

Answer 2

這是有關斷點的文檔，因為您似乎正在使用 material-ui v5（現在稱為 mui） https://mui.com/customization/breakpoints/#main-content