如何在 React Material UI 的 AppBar 组件中设置容器？

Question

当我看到 MUI 的 default 时AppBar，它的子项看起来非常不同，尤其是在宽屏幕尺寸下。徽标位于完全左侧，其他导航位于右侧。所以项目看起来彼此分开。

我想要做的是像 Bootstrap 的组件，我想应用如下图所示的最大宽度。如何在其中设置容器AppBar？

这是我尝试过的。

<AppBar>
    <ToolBar>
        <Grid
             container
             style = {{ maxWidth: 1170 }}
         >
         <Typography>Logo</Typography> 
         </Grid>
    </ToolBar>
</AppBar>

但它不起作用......

Answer 1

您可以尝试使用

<CssBaseline />
<AppBar position="static">
    <Container maxWidth="lg">
        <ToolBar>
            <Typography>Logo</Typography> 
        </ToolBar>
    </Container>
</AppBar>

Answer 2

我就是这样做的：

import AppBar from "@material-ui/core/AppBar";
import { makeStyles } from "@material-ui/core/styles";
import Toolbar from "@material-ui/core/Toolbar";
import React from "react";

const useStyles = makeStyles(() => ({
  toolBar: {
    margin: "auto",
    maxWidth: 800,
    width: "100%"
  },
}));

export default function() {
  const classes = useStyles();

  return (
    <AppBar>
      <Toolbar className={classes.toolBar}>
        {...}
      </Toolbar>
    </AppBar>
  );
}