Выровняйте типографский компонент справа

Question

Я хотел бы выровнять два типографских компонента на одной строке, чтобы один выровнялся по левому краю, а другой по правому.Как мне этого добиться?

Это код, который у меня есть, но компоненты расположены рядом друг с другом слева.

const useStyles = makeStyles({
  leftText: {
    textAlign: "left"
  },
  rightText: {
    textAlign: "right"
  }
});

function ChooseNewSupport(props) {
    const classes = useStyles();
    return (
        <DialogContent>
        <Typography inline variant="body1" className={classes.leftText}>
          Choose New Support:
        </Typography>
        <Typography inline variant="body1" className={classes.rightText}>
    </DialogContent>
    );
}

Answer 1

Если вы используете Mui, почему бы не использовать их реквизиты - это облегчит ваши собственные стили. Вам также нужно будет поместить элементы p в div - если вы используете Grid, вы можете использовать flex box «space -ween», чтобы переместить каждый элемент в любую сторону.

<Grid container justify="space-between>  
  <Typography inline variant="body1" align="left">Choose New Support:</Typography>
  <Typography inline variant="body1" align="right">some text</Typography>
</Grid>