How do I set container within React Material UI's AppBar Component?

Question

When I see MUI's default AppBar, its children looks so apart especially in wide screen size. The logo is located completely left, and other navs is located too much right. So Items look so apart each other.

What I want to do is like Bootstrap's component, I want to apply maximum width like below image. How do I set container within AppBar?

This is what I tried.

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

But it's not worked...

Answer 1

You may try using

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

Answer 2

This is how I do it:

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>
  );
}