Tpyography 用网格分成工具栏中的第二行

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