Пользовательский интерфейс материала: избегайте разрыва строки между типографскими компонентами

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

Используйте встроенную опору.

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

https://material -ui.com / апи / типографика /

Answer 2

Оберните те, что на дисплее: 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.