如何在没有<br>的情况下使版式材料成为用户界面

Question

默认的Typography材质-ui在新行上移动下一个tag-element，当下一个fe在此行时，如何自定义此组件？

我使用这个组件。

Answer 1

而不是覆盖样式，只需应用inlineprop或displayprop（取决于您的版本）。

Previous to 4

<Typography inline>Left</Typography>
<Typography inline>Right</Typography>

4.x

<Typography display="inline">Left</Typography>
<Typography display="inline">Right</Typography>

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

Answer 2

下一个元素换行的原因是因为常规 Typography 会转换为以下代码：

<p class="MuiTypography-root MuiTypography-body2 css-9emux6">
   <!-- Your code here -->
</p>

因此，段落的工作方式是将其后面的元素移动到下一行。对于 MUI 版本 >= 4.x，您可以使用属性“组件”，如下所示：

<Typography variant="body2" component="span">
       <!-- Your code here -->
</Typography>

上面的代码将被转换为：

<span class="MuiTypography-root MuiTypography-body2 css-9emux6">
   <!-- Your code here -->
</span>

因此，众所周知，“span”是一个“内联”组件，下一个元素（如果它也是“内联”）将不会移动到新行。

Answer 3

将display组件的样式设置为除以外的任何样式block。

<Typography style={{display: 'inline-block'}}>Left</Typography>
<Typography style={{display: 'inline-block'}}>Right</Typography>

Answer 4

从材料 4 开始，您可以执行此操作

<Typography display="inline">Left</Typography>
<Typography display="inline">Right</Typography>