Search code examples
reactjsmaterial-uitypographytext-align

Material UI v5 Align Inline Typography Component to the right

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.

Solution

  • 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 :)