Material UI v5 Align Inline Typography Component to the right

Question

I just upgraded to MUI Version 5.4 and now my Inline Typography does not align right anymore.

This is my Code that worked for MUI Version 4:

<Grid container xs={12}>
  <Grid container xs={12} justify="space-between" style={{borderBottom: "3px solid black"}}>
    <Typography inline>Value</Typography>
    <Typography inline align="right">{prodVol}MWh</Typography>
  </Grid>
</Grid>

My Guess is, that there is a Problem with the new Grid, because when I changed that Import the Code stopped working.

Please check this [answer](https://stackoverflow.com/questions/45159071/mui-how-to-align-a-component-to-the-center-right). — Medi, Feb 07 '22 at 07:39

score 1 · Accepted Answer · answered Feb 07 '22 at 07:50

As Explained in this answer, I just replaced "justify" with "justifyContent".

My Working Code for MUI V5:

<Grid container xs={12}>
  <Grid container xs={12} justifyContent="space-between" style={{borderBottom: "3px solid black"}}>
    <Typography inline>Value</Typography>
    <Typography inline align="right">{prodVol}MWh</Typography>
  </Grid>
</Grid>

Thanks Medi :)

Material UI v5 Align Inline Typography Component to the right

1 Answers1