将排版组件向右对齐答案

【问题标题】：Align typography component to the right将排版组件向右对齐
【发布时间】：2019-10-08 10:37:14
【问题描述】：

我想将两个排版组件对齐在同一行，使一个左对齐，另一个右对齐。我如何做到这一点？

这是我的代码，但组件靠左对齐。

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>
    );
}

【问题讨论】：

你能包含整个代码库吗？

标签： javascript css reactjs alignment material-ui

【解决方案1】：

如果您使用 Mui，为什么不使用他们的道具 - 它会比您自己的风格更容易。您还必须将 p 元素放在一个 div 中 - 如果您使用 Grid，您可以使用弹性框“space-between”将每个元素推到任一侧。

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

【讨论】：