我发现很难在 Material UI 上创建带有菜单的导航栏。我读过它的 AppBar 文档。但是，他们似乎不提供该功能。

1)Material UI AppBar

2) React Bootstrap 导航栏

如何像 React Bootstrap 一样在 Material UI 上创建导航栏菜单？

请您参考如下方法:

不幸的是，Material-UI 没有像 Bootstrap 那样提供navbar组件。 (它确实有一个appbar，但我不认为这就是您要找的)。此外，它不会像 bootstrap 那样为您提供开箱即用的自动响应能力。它只是为您提供工具，因此您必须自己处理。

但是，导航栏可以使用一些带有 Flex 的基本 MUI 组件来组成:

import React from "react"; 
import "./styles.css"; 
import { Box, Typography, Button, IconButton } from "@material-ui/core"; 
import MenuIcon from "@material-ui/icons/Menu"; 
 
export default function App() { 
  return ( 
    <Box display="flex" bgcolor="grey.200" p={2} alignItems="center"> 
      <Typography>React-bootstrap</Typography> 
      <Box> 
        <Button color="primary">Link</Button> 
        <Button color="primary">Link</Button> 
      </Box> 
      <Box flexGrow={1} textAlign="right"> 
        <IconButton> 
          <MenuIcon /> 
        </IconButton> 
      </Box> 
    </Box> 
  ); 
} 
 

这是live demo :