材质用户界面：避免版式组件之间的换行

Question

我想在文本上应用两个不同的Typography标签，但我不希望在两者之间出现换行符。

这就是我所拥有的：

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

这是它的样子（带有换行符）：

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

如何删除换行符？

Answer 1

将其包装在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的{​​{1}}。

Answer 2

使用嵌入式道具。

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

https://material-ui.com/api/typography/