使用材料-UI的新反应和按钮组件字体重量的显示不正确

Question

我在以前和最新的反应应用程序上都有这些代码：

<Typography
  variant="h6"
  color="inherit"
  noWrap
>
  h6. Heading
</Typography>
<Button
  type="button"
  size="large"
  color="primary"
>
  Primary button
</Button>

他们的标签在我以前的和最新的应用程序上都具有font-weight: 500。问题是，在我以前的应用程序和材料-UI演示中，这些标签具有" BOLD Exply" ，而在我新创建的React App上，它们只有"正常的字体重量外观"和必须有一个font-weight: 550才能具有" Bold Text" 。

我最新的React应用程序具有这些依赖项，具有6.8.0的npm版本：

"@material-ui/core": "^3.9.2",
"react": "^16.8.2",

有什么原因发生的原因？相信我，我已经尝试只输出一个没有任何父母的Typography和一个Button组件，而且似乎他们仍然以正常的字体重量出现。

Answer 1

您正在尝试使用H6，该H6尚未在材料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>

---

关于为什么在您的旧应用中起作用的原因，很难看不到代码，但是您可能使用"下一步"，而不是材料UI的"稳定"分支。