reactjs - Material UI - 避免 Typography 组件之间的换行

Question

这个问题已经有答案了:

How to make Material UI Typography without newline? (6 个回答)

已关闭 1 年前。

我想对我的文本应用两个不同的版式标签，但我不希望中间有换行符。

这就是我所拥有的:

<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}}来在两者之间留出间距。如果你想垂直对齐它们，请将 flexDirection:'column' 赋予 Project 的 style。