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&nbsp;flex-grow: 1.const useStyles = makeStyles(() => ({&nbsp; h5: {&nbsp; &nbsp; flexGrow: 1&nbsp; }}));function App() {&nbsp; const classes = useStyles();&nbsp; return (&nbsp; &nbsp; <AppBar position="fixed">&nbsp; &nbsp; &nbsp; <Toolbar>&nbsp; &nbsp; &nbsp; &nbsp; <Typography className={classes.h5} variant="h5">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem Ipsum Lorem Ipsum&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; <Grid item>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid container item justify="flex-end" direction="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained">b1</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained">b2</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; </Toolbar>&nbsp; &nbsp; </AppBar>&nbsp; );}https://codesandbox.io/s/material-ui-appbar-flexbox-9x8l4