javascript - 排版在带有网格的工具栏中进入第二行

Question

我正在创建一个应用栏，我想要左边的标题(Lorem ipsum 文本)和右边的按钮，我写了这段代码来做到这一点，但是看起来我有某种最大宽度之后文本分成第二行，我希望它在一行中 这是代码:

<AppBar position="fixed">
  <Toolbar>
    <Typography variant="h5">Lorem Ipsum Lorem Ipsum</Typography>
    <Grid container item justify="flex-end" direction="row">
      <Button variant="contained" className={classes.navbarBtn}>
        {b1}
      </Button>
      <Button variant="contained" className={classes.navbarBtn}>
        {b2}
      </Button>
    </Grid>
  </Toolbar>
</AppBar>;

Answer 1

Toolbar有display: flex .因此，它的子项(在本例中为 Typography 和 Grid)宽度考虑了这一点。

现在，<Grid container/>有width: 100%所以它占用了所有可用空间。

为了只给按钮容器它需要的空间，

• 您可以将它分成 2 个网格 - item和 container .
• 给出 Typography flex-grow: 1 .

const useStyles = makeStyles(() => ({
  h5: {
    flexGrow: 1
  }
}));

function App() {
  const classes = useStyles();
  return (
    <AppBar position="fixed">
      <Toolbar>
        <Typography className={classes.h5} variant="h5">
          Lorem Ipsum Lorem Ipsum
        </Typography>
        <Grid item>
          <Grid container item justify="flex-end" direction="row">
            <Button variant="contained">b1</Button>
            <Button variant="contained">b2</Button>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

https://codesandbox.io/s/material-ui-appbar-flexbox-9x8l4