我想在同一行上对齐两个排版组件,以便一个向左对齐,另一个向右对齐。我如何实现这一目标?
这是我拥有的代码,但组件在左侧彼此相邻对齐。
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>
);
}
最佳答案
如果您使用 Mui,为什么不使用他们的 Prop - 它会比您自己的风格更容易。您还必须将 p 元素放在 div 中 - 如果您使用 Grid,您可以使用 flexbox “间隔”将每个元素推到任一侧。
<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>