在React Material UI中对齐文本

问题描述

我有一个非常简单的问题。我想将'01 / 01/2020'与'A00002'对齐。

请在此处查看我的代码和框 CLICK HERE

<div className={classes.root}>
  <Typography variant="h6" className={classes.marginTop2}>
    <span className={classes.fontBold}>Date:</span>{" "}
    <span className={classes.marginLeft3}>01/01/2020</span>
  </Typography>
  <Typography variant="h6" className={classes.marginTop1}>
    <span className={classes.fontBold}>Transaction Code:</span>{" "}
    <span className={classes.marginLeft3}>A00002</span>
  </Typography>
</div>

输出

Date:                01/01/2020
Transaction Code:    A00002

解决方法

创建一个此类，而不是使用 marginLeft120 作为日期，而不是 marginLeft3 。

 marginLeft120: {
   marginLeft: 120
 },

,

编辑：这是我的方法。我修改了marginLeft3类。还要看看我的沙盒代码

  marginLeft3: {
    position: "absolute",left: 200,marginLeft: 3
  },

Sandbox