如何在没有换行符的情况下制作 MUI 排版？答案

【问题标题】：How to make MUI Typography without newline?如何在没有换行符的情况下制作 MUI 排版？
【发布时间】：2018-05-07 10:23:30
【问题描述】：

MUI 中默认的Typography 将下一个标签元素移动到新行，如何自定义这个组件，当下一个 f.e.在这条线上吗？

我使用this 组件。

【问题讨论】：

什么是“f.e.”？
我的意思是举例
“例如”实际上是缩短的，例如:)

标签： reactjs material-ui

【解决方案1】：

而不是覆盖样式，只需应用 inline 属性或 display 属性（取决于您的版本）。

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/

【讨论】：

【解决方案2】：

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

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

【讨论】：

这应该是style={{display: 'inline-block'}}，你错过了' '

【解决方案3】：

从材料 4 开始，您可以这样做

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

【讨论】：

【解决方案4】：

Typography 使用“

作为 HTML 标记。无法将长文本保留在一行中。请尝试使用。

2019 年 6 月 25 日更新

使用 display="inline" 应该可以工作。

【讨论】：

我会说使用 component={span} 仍然是比强制段落内联更好的选择。

【解决方案5】：

在 MUI v5 中删除所有 Typography 变体中的换行符：

const theme = createTheme({
  typography: {
    allVariants: {
      '&': {
        display: 'inline',
      },
    },
  },
});

仅在某些变体中设置inline：

const theme = createTheme({
  typography: {
    subtitle1: { display: 'inline' },
    subtitle2: { display: 'inline' },
    body1: { display: 'inline' },
    body2: { display: 'inline' },
    button: { '&': { display: 'inline' } }, // add '&' to increase CSS specificity
    caption: { '&': { display: 'inline' } },
    overline: { '&': { display: 'inline' } },
  },
});

现场演示

【讨论】：