材质用户界面:避免排版组件之间的换行符

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

将它们包裹在显示器中:flex并将它连续显示.

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

编码代码的代码框.

编辑:您可以使用style={{marginLeft:10}}on Example来给两者之间的间距.如果你想垂直对齐他们,给flexDirection:'column'到style的Project.

Answer 2

在4.x版上使用展示道具

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

在版本<4.x上使用嵌入式道具

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

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