css - Material UI，左侧为 Appbar Logo ，中间为 Tabs

Question

我制作了一个 react Material ui AppBar。

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

我怎样才能让它向左走？

我正在使用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="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>
  );
};

在这种情况下， Logo 和标签都位于中心。

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

Answer 1

我想到的解决方案是添加空的 3rd Grid 项。
在 Grid 容器上对齐 'space-between'。
将 xs={1} 赋给第一个 Grid 元素，其中是 Logo 。
将 xs={4} 赋给标签网格项。
将 xs={1} 赋给第三个 Grid 项。

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