Material UI v5 将内联排版组件右对齐

Question

我刚刚升级到 MUI 5.4 版，现在我的内联排版不再正确对齐。

这是我的适用于 MUI 版本 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>

我的猜测是，新网格有问题，因为当我更改它时，导入代码停止工作。

Answer 1

如本中所述，我只是将“justify”替换为“justifyContent”。

我的 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>

谢谢梅迪 :)

Material UI v5 将内联排版组件右对齐

Material UI v5 Align Inline Typography Component to the right

typography

text-align

reactjs

material-ui