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，以便使用浅色/常规/黑色Roboto字体。另外，如果要使其变为粗体或斜体，请用HTML或标签将其包裹起来。

例如

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