Material UI，左侧的 Appbar 标志，中间的 Tabs答案

【问题标题】：Material UI, Appbar logo on left, Tabs in the centerMaterial UI，左侧的 Appbar 标志，中间的 Tabs
【发布时间】：2019-07-25 18:45:59
【问题描述】：

我制作了一个反应材质ui AppBar。

有一个标志和标签。
选项卡应位于 AppBar 的中心，徽标位于左侧。
但我不能让徽标向左移动。

我怎样才能让它向左走？

我用的是mui的Grid系统，但如果有更好的解决方案也没关系。

这里是一个活生生的例子https://codesandbox.io/embed/delicate-feather-mmf3k

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  return (
    <nav className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar style={{ alignItems: "center", justifyContent: "center" }}>
          <Grid justify={"center"} alignItems={"center"} container>
            <Grid style={{ justifySelf: "flex-start" }} item>
              <img
                className={classes.logo}
                src={
                  "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
                }
                alt="Bosch Logo"
              />
            </Grid>
            <Grid item>
              <Grid container justify={"center"}>
                <Tabs
                  onChange={(e, v) => setValue(v)}
                  value={value}
                  aria-label="Navigation Tabs"
                >
                  <Tab label={"page 1"} />
                  <Tab label={"page 2"} />
                </Tabs>
              </Grid>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </nav>
  );
};

在这种情况下，徽标和选项卡都位于中心。

我厌倦了在徽标上将justifySelf、alignSelf 设置为flex-start 无济于事。
将xs 添加到第二个 Grid 项目，使徽标向左，但在这种情况下，选项卡并不完全位于中心。

【问题讨论】：

标签： css reactjs material-ui css-grid

【解决方案1】：

我想出的解决方案是添加空的第三个网格项。
在 Grid 容器上对齐 'space-between'。
将 xs={1} 分配给第一个 Grid 项目，其中是徽标。
将xs={4} 分配给选项卡网格项。
将xs={1} 分配给第三个网格项。

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  return (
    <nav className={classes.root}>
      <AppBar position="static" color="default">
        <Toolbar>
          <Grid justify={"space-between"} container>
            <Grid xs={1} item>
              <img
                className={classes.logo}
                src={
                  "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
                }
                alt="Bosch Logo"
              />
            </Grid>
            <Grid xs={4} item>
              <Grid container justify={"center"}>
                <Tabs
                  onChange={(e, v) => setValue(v)}
                  value={value}
                  aria-label="Navigation Tabs"
                >
                  <Tab label={"page 1"} />
                  <Tab label={"page 2"} />
                </Tabs>
              </Grid>
            </Grid>
            <Grid item xs={1} />
          </Grid>
        </Toolbar>
      </AppBar>
    </nav>
  );
};

工作演示：https://codesandbox.io/s/great-cloud-zwghk

【讨论】：