Как добавить пользовательские веса шрифта в Material UI?

Question

Как добавить пользовательские веса шрифта в Material UI?

1

Попытка настроить тему "Материал" для использования моего собственного шрифта и веса/размеров шрифта для компонентов Typography. Для раздела fontWeight я хочу просто иметь возможность вводить 100/200/300/400/500/600/700 качестве параметров для каждого конкретного варианта типографии материала, однако, он определенно принимает "строку" и, по-видимому, может только быть normal/bold/bolder/lighter

И что еще хуже - normal == 400 а bold == 700 пропуская 500 и 600, которые мне нужны

typography: {
    fontFamily: "MyCustomFont",
    fontWeightLight: 200,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    useNextVariants: true,
    h1: {
      fontSize: "1.25rem",
      fontWeight: "bold",
      lineHeight: "1.2em"
    },
    h2: {
      fontSize: "1.75rem",
      fontWeight: "normal",
      lineHeight: "1.2em"
    },
}

user10741122 15 апр. 2019, в 17:58

Источник

0

Вы пытаетесь стилизовать элемент Typography следующим образом: <Typography variant="h6" color="inherit"> или вы пытаетесь стилизовать элемент material-ui, содержащий текст?
Pedro Vieira 15 апр. 2019, в 16:48

Теги:

javascript

reactjs

typescript

material-ui

1 ответ

Ещё вопросы

Вы пытаетесь стилизовать элемент Typography следующим образом: <Typography variant="h6" color="inherit"> или вы пытаетесь стилизовать элемент material-ui, содержащий текст?

Pedrinhow · Answer 1 · 2019-04-15T18-02-00.000Z

Я использую то же поведение с числами, протестировано со всеми 100/200/300/400/500/600/700 и это сработало также:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core/';

const THEME = createMuiTheme({
  typography: {
    "fontFamily": "\"MyCustomFont\"",
    "fontSize": 20,
    "lineHeight": 1.5,
    "letterSpacing": 0.32,
    useNextVariants: true,
    suppressDeprecationWarnings: true,
    h6: {
      "fontWeight": 600,
    },
  },
});

<MuiThemeProvider theme={THEME}>
  <Typography variant="h6" color="inherit" align="center" style={{ margin: "1rem" }}>
      Some text
  </Typography>
</MuiThemeProvider>