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

Question

当我看到MUI的默认AppBar时，它的子项看起来是如此分开，特别是在宽屏尺寸上。徽标位于完全左侧，而其他导航位于右侧太多。因此，项看起来彼此分开。

我想做的就像Bootstrap的组件一样，我想像下面的图像一样应用最大宽度。如何在AppBar中设置容器？

这就是我尝试过的。

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

但这没用...

Answer 1

这是我的方法：

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 2

您可以尝试使用

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

Answer 3

您可以尝试使用material-ui内置的withStyles

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

Answer 4

您可以尝试以下方法：

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