Tpyography breaks into second line in toolbar with grid

user_10506842 0
Viewed 31

I am creating an Appbar and I want the title (Lorem ipsum text) on the left and the buttons on the right, I wrote this code to do that, but with this it seems I have some kind of max width after which the text breaks into second line, and I want it in one line here's the code:

<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>;
material-ui reactjs javascript
1 Answers

Toolbar has display: flex. Therefor, its children's (Typography and Grid in this case) width considered this.

Now, <Grid container/> has width: 100% so it takes all the available space.

In order to give the buttons container only the space it needs,

  • You can separate it to 2 grids - item and container.
  • Give the 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

user_8631100
Related