Различные варианты шрифта Roboto в компонентах Material-UI

Question

Я использую Material-UI компоненты последней версии. В документах они говорят, что вы должны поставить эту строку кода

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

в вашем index.html, чтобы иметь возможность использовать шрифт Roboto. У меня вопрос, как применить разные варианты шрифта Roboto (например, обычный, жирный, средний, черный, светлый) для разных компонентов?

Answer 1

На странице Типография с пользовательским интерфейсом Roboto:300, 400, 500 применяется к типографии по умолчанию с пользовательским интерфейсом.

В вашем случае вы можете изменить fontFamily на Roboto и fontWeight на 100, 300, 400, 700 и 900, чтобы использовать светлый / обычный / черный шрифт Roboto. Кроме того, оберните их HTML или тегом, если хотите сделать его жирным или курсивом.

Например,

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