material-ui - ListItem 未显示在带有 next.js 的 Material-ui 中的 Drawer 内

Question

我正在尝试使用 material-ui 和 next.js 实现一个临时抽屉。这是代码：

const useStyles = makeStyles(theme => ({
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  },
  sideBar: {
    width: 250
  }
}));

const Navbar = () => {
const classes = useStyles();
const [open, setOpen] = useState(false);

const handleDrawerOpen = () => {
    setOpen(true);
  };
const handleDrawerClose = () => {
    setOpen(false);
};

return (
    <>
      <AppBar position='fixed'>
        <Toolbar>
          <IconButton
            onClick={handleDrawerOpen}
            edge='start'
            className={classes.menuButton}
            color='inherit'
            aria-label='menu'
          >
           <MenuIcon />
          </IconButton>
          <Typography variant='h6' className={classes.title}>
            News
          </Typography>
          <Button color='inherit'>Login</Button>
        </Toolbar>
      </AppBar>
      <Toolbar />
      <Drawer anchor='left' open={open} onClose={handleDrawerClose}>
        <List component='nav' className={classes.sideBar}>
          <ListItem button>
            <ListItemIcon>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText primary='Inbox' />
              </ListItem>
        </List>
      </Drawer>
    </>
 );
};

export default Navbar;

当我按下菜单按钮时，抽屉打开但它是空的。另一方面，如果我删除List组件并保留ListItem，则抽屉不再是空的。

我不明白为什么。任何想法？

顺便说一下，我确实实现了 next.js + material-ui项目

标签： material-uinext.js