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

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

Answer 3

You can try this:
function MyAppbar() {
const classes = makeStyles(theme => createStyles({
root: {
flexGrow: 1,
},
appBar: {
display: 'flex',
justifyContent: 'center',
flexDirection: 'row'
},
toolBar: {
width: '100%',
maxWidth: 1170
}
}))()
return (
<div className={classes.root}>
<AppBar position="static" className={classes.appBar}>
<Toolbar variant="dense" className={classes.toolBar}>
...
</Toolbar>
</AppBar>
</div>
)
}

Answer 4

You can try to use withStyles that is built in material-ui
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import { AppBar, ToolBar, Grid, Typography } from '#material-ui/core';
const styles = {
toolbar: {
maxWidth: 1170
}
}
class App extends React.Component {
render() {
return (
<AppBar>
<ToolBar
className={this.props.classes.toolbar}
>
<Grid
container
>
<Typography>Logo</Typography>
</Grid>
</ToolBar>
</AppBar>
)
}
}
export default withStyles(styles)(App);