在Material UI中将菜单与AppBar一起使用的正确方法是什么

问题描述

我对此有些困惑，如果您知道如何的话，可能会很容易。该文档有一个示例，但它不起作用：

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/app-bar/MenuAppBar.tsx

https://material-ui.com/components/app-bar/#app-bar-with-menu-此示例不正确，并从头开始显示如何切换图标。

有人知道要使用的正确组件以及如何使用它们吗？

    <AppBar variant="outlined" position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6">
          The title
        </Typography>
      </Toolbar>
    </AppBar>

解决方法

在此处发布，以供将来用户参考。

如果您要查找单击汉堡包按钮时显示的侧边栏菜单，则可以使用Drawer组件并像下面那样构造AppBar。

export default function App() {
  const [isDrawerOpen,setIsDrawerOpen] = useState(false);
  const classes = useStyles();

  return (
    <AppBar variant="outlined" position="static">
      <Toolbar>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="menu"
          onClick={() => setIsDrawerOpen(true)}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6">The title</Typography>

        <Drawer open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
          <List className={classes.drawer}>
            <ListItem button>
              <ListItemText primary="Home" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="About" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="Contact" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="Services" />
            </ListItem>
          </List>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
}