Align typography component to the right

笑着哭i 提交于 2019-12-11 03:19:45

问题


I would like to align two typography components on the same line so that one is aligned to the left and the other to the right. How do I achieve this?

This is the code I have but the components are aligned next to each other to the left.

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

回答1:


If you're using Mui, why not use their props - it'll keep it easier then your own styles. You will also have to put the p elements within a div - if you use Grid you can use flex box "space-between" to push each element to either side.

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


来源:https://stackoverflow.com/questions/56248358/align-typography-component-to-the-right

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!