Css 新React with Material UI排版和按钮组件字体权重显示不正确

我在以前和最新的React应用程序中有以下代码：

<Typography
  variant="h6"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

<Button
  type="button"
  size="large"
  color="primary"
>
  Primary button
</Button>

---

为什么会这样？相信我，我已经尝试在没有任何父元素的情况下只输出一个

排版

和一个

按钮

组件，看起来它们仍然以正常的字体显示。

您正在尝试使用h6，它尚未在Material UI的稳定分支上发布（将在版本4.0.0中）

选项1

您可以将

useNextVariants:true

添加到MUI主题中，以同时使用h6（以及4.0.0中的所有其他字体）：

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

---

选项2

如果您现在想要快速修复，也可以使用

variant=“title”

而不是

variant=“h6”

，但请记住，在升级到4.0.0时仍需要更改此选项。对于快速修复，您的代码如下所示：

<Typography
  variant="title"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>

h6。标题

---

至于为什么这在你的老应用程序中有效，很难说没有看到代码，但你可能使用的是“下一步”，而不是材质UI的“稳定”分支

<Typography
  variant="title"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>