在 React 中对齐文本 Material UI

Question

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

对齐

请在这里查看我的codesandbox 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

Answer 1

创建这个 class，而不是 marginLeft3，使用 marginLeft120 作为日期。

 marginLeft120: {
   marginLeft: 120
 },

Answer 2

编辑：我是这样做的。我修改了 marginLeft3 class。也看看我的沙盒代码

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

Sandbox

在 React 中对齐文本 Material UI

Aligning Text in React Material UI

css

reactjs

material-ui

jss