Question

我在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项，会使徽标向左移动，但在这种情况下，选项卡并不完全在中心。

Answer 1

我想出的解决方案是添加空的3rd 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

材质用户界面，左侧为Appbar徽标，中间为标签页

1 个答案: