Material UI Vertical Divider within Grid not showing

user_4997192 0
Viewed 604

I am trying to place a vertical <divider> within a grid as a but it is not showing. When I remove it and do not put it within a <Grid Item> it shows but I believe is not the correct way. What is missing here:

<Grid container justifyContent="space-between" spacing={1}>
    <Grid item>
        <Grid container alignItems="center" spacing={2}>
            <Grid item>
                Something
            </Grid>
            <Grid item >
                <Divider orientation="vertical" variant="middle" flexItem />
            </Grid>   
            <Grid item>
                Something else
            </Grid>         
        </Grid>
    </Grid>
</Grid>
material-ui reactjs
1 Answers

Just without the surrounding Grid item is fine:

<Grid container justifyContent="space-between" spacing={1}>
  <Grid item>
    <Grid container alignItems="center" spacing={2}>
      <Grid item>Something</Grid>
      <Divider orientation="vertical" flexItem />
      <Grid item>Something else</Grid>
    </Grid>
  </Grid>
</Grid>

See as well Vertical with text example in the official documentation.

user_32284830
Related