Блог

Я создаю панель приложений, и мне нужен заголовок (текст 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>;

 

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