reactjs - Material 用户界面: Avoid line break between Typography components

我想将两个不同的Typography标记应用于文本，但是我不希望在两者之间使用换行符。

这就是我所拥有的:

<Typography variant="title" color="inherit" noWrap>
  Project:
</Typography>
<Typography variant="subheading" color="inherit" noWrap>
  Example
</Typography>

这是它的样子(带有换行符):



工作示例:
https://codesandbox.io/s/jzmz7klzmy

如何删除换行符？

最佳答案

将其包装在display:flex中，然后将其连续显示。

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

已编辑代码的codesandbox。

编辑:您可以在style={{marginLeft:10}}上使用Example在两者之间留出间距。
如果要垂直对齐它们，请将flexDirection:'column'赋予style的Project。