Material UI：在两个 Typography 组件之间放置一个空间

Question

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

这是我的代码：

  <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

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

<div style={{ display: "flex" }}>
  <Typography variant="title" color="inherit" noWrap>
    Project:
  </Typography>
  <Typography variant="title" color="inherit" noWrap>
    &nbsp;
  </Typography>
  <Typography variant="body2" color="inherit" noWrap>
    Example
  </Typography>
</div>

Answer 2

这个问题有点老了，但我面临着同样的问题，所以我会发布我的解决方案。我使用了 flex 属性：

align-items: baseline;

所以代码会是这样的：

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

结果如下：

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

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