材质用户界面：在两个版式组件之间放置一个空格

Question

如何在两个版式组件之间添加空格并在底部将它们对齐？

这是我的代码：

  <div style={{ display: "flex" }}>
    <Typography variant="title" color="inherit" noWrap>
      Project:
    </Typography>
    <Typography variant="body 2" color="inherit" noWrap>
      Example
    </Typography>
  </div>

它看起来像这样：

工作示例： https://codesandbox.io/s/llqry78p29

Answer 1

这个问题有点老了，但是我也遇到了同样的问题，所以我将发布修复程序。我使用了flex属性：

align-items: baseline;

所以代码如下：

<div style={{ display: "flex", alignItems: "baseline" }}>
   ...
</div>

结果将如下所示：

评论align-items: flex-end中提到的解决方案没有给我预期的结果，文本Example有点太远了：

示例：https://codesandbox.io/s/material-demo-2od20

Answer 2

只需添加一个只有空白的排版元素：

<div style={{ display: "flex" }}>
  <Typography variant="title" color="inherit" noWrap>
    Project:
  </Typography>
  <Typography variant="title" color="inherit" noWrap>
    {' '}
  </Typography>
  <Typography variant="body 2" color="inherit" noWrap>
    Example
  </Typography>
</div>