而不是覆盖样式，只需应用inline prop或display prop（取决于您的版本）。
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/

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

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

从材料4开始你可以这样做

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

下一个元素之所以为什么会变成新的一行，是因为常规Typography会转换为以下代码：

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

因此，段落的工作方式是将它后面的元素移动到下一行。在MUI版本>= 4.x时，可以像这样使用属性**"component"**：

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

上面的代码将被转换为：

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

所以，我们都知道**"span"是一个"inline"组件，下一个元素（如果它也是"inline"**）不会被移动到新的一行。

排版使用“< p >< /p >作为HTML标记。不可能将长文本保持在一行中。试着使用< span >。
更新日期25/06/2019
使用display=“inline”应该可以工作。

• *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' } },
  },
});

现场演示