如何在Material UI中添加自定义字体粗细？

Question

尝试将Material主题配置为使用我自己的字体和Typography组件的自定义字体粗细/大小。对于fontWeight部分，我只想输入100/200/300/400/500/600/700作为每个特定材料排版变体的选项，但是，它专门采用了“字符串”，显然只能是{{1 }}

更糟糕的是normal/bold/bolder/lighter，而normal == 400跳过了我需要的500和600

bold == 700

Answer 1

我对数字进行了相同的测试，并通过所有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>

Answer 2

Box元素可以提供帮助。忽略Typography元素。

请参见下面的代码示例

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…

See official docs for more details