Material UI，应用栏徽标位于左侧，选项卡位于中间

Question

我做了一个反应材料 ui AppBar。

有徽标和标签。
选项卡应位于 AppBar 的中心，徽标位于左侧。
但我无法让徽标移至左侧。

我怎样才能使它向左走？

我正在使用 mui 的网格系统，但如果有更好的解决方案并不重要。

这是一个实例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="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到第二个网格项，使徽标移至左侧，但在这种情况下选项卡并不完全位于中心。

Answer 1

我想出的解决方案是添加空的第三个网格项。在网格容器上
对齐。 给予第一个网格项目，其中是徽标。 赋予选项卡网格项目。 给予第三个网格项目。'space-between'
xs={1}
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="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