Material UI 上的默认导航栏是否像 Bootstrap 一样存在？答案

【问题标题】：Is default navbar on Material UI exist like Bootstrap does?Material UI 上的默认导航栏是否像 Bootstrap 一样存在？
【发布时间】：2018-02-13 15:22:05
【问题描述】：

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

1) Material UI AppBar

2) React Bootstrap 导航栏

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

【问题讨论】：

@HemersonCarlin .. 不，我想要的是 Material UI 的导航栏有菜单

标签： reactjs navbar material-ui react-bootstrap appbar

【解决方案1】：

AppBar 或多或少只是其他组件的容器。它本身并没有多大作用。我认为您想要的是向您的 AppBar 添加一个菜单（或者，更具体地说，添加到 AppBar 内的工具栏）：

https://material-ui.com/components/menus/

您还可以添加常规按钮：

https://material-ui.com/components/buttons/

一个简化的例子：

      <AppBar>
        <Toolbar>
          <Menu>
            <MenuItem>An item</MenuItem>
            <MenuItem>Another item</MenuItem>
          </Menu>
          <Button>A button</Button>
        </Toolbar>
      </AppBar>

【讨论】：

【解决方案2】：

不幸的是，Material-UI 没有像 Bootstrap 那样提供navbar 组件。（虽然它确实有一个appbar，但我认为这不是你要找的东西）。此外，它不会像引导程序那样为您提供开箱即用的自动响应能力。它只是为您提供工具，因此您必须自己处理。

一个导航栏，但是可以使用一些带有 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：

【讨论】：