material-ui 组件中 Roboto 字体的不同变体

Question

我正在使用 material-ui 组件的最新版本。在文档中他们说你必须把这行代码

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"

在您的 index.html 中可以使用字体 Roboto。我的问题是如何为不同的组件应用 Roboto 字体的不同变体（即常规、粗体、中等、黑色、浅色）？

Answer 1

在页面 Material-UI Typography 中，Roboto:300、400、500 适用于 Material-UI 默认排版。

在您的情况下，您可以将 fontFamily 更改为 Roboto，将 fontWeight 更改为 100、300、400、700 和 900，以便使用 light/regular/black Roboto 字体。另外，如果要将其设为粗体或斜体，请将它们用 HTML 或标记包裹起来。

例如，

<Typography variant="h6" style={{fontWeight: "700",fontFamily: "Roboto"}}>
  This is stack overflow
</Typography>

Different variants of font Roboto in material-ui components