如何配置 MUI v5 自定义字体系列？

Question

我有以下内容：

cont theme = createTheme({
  typography: {
    allVariants: MetricFontFaces,
    fontFamily: 'MetricHPEXS'
  } as TypographyOptions,
  components: {
    MuiFormControl: {
      styleOverrides: {
        root: {
          fontFamily: 'MetricHPEXS'
        }
      }
    },
    MuiInput: {
      styleOverrides: {
        root: {
          fontFamily: 'MetricHPEXS'
        },
        formControl: {
          fontFamily: 'MetricHPEXS'
        },
        input: {
          fontFamily: 'MetricHPEXS'
        }
      }
    },
    MuiOutlinedInput: {
      styleOverrides: {
        input: {
          fontFamily: 'MetricHPEXS'
        }
      }
    }
  }
});

然后我试着在我的故事书中这样使用它：

    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        {story()}
        <TextField value="sdasdasd" />
      </ThemeProvider>
    </StyledEngineProvider>

自定义字体系列不适用。

如何正确创建 MUI v5 主题以便所有组件都接受相同的自定义字体？

Answer 1

最后，我们将字体设置直接应用到 MuiCssBaseline 上，以便让其他所有内容都选择 font-family。示例：

import { TypographyOptions } from '@mui/material/styles/createTypography';

export const muiThemeOptions = {
  typography: {
    fontFamily: 'MetricHPEXS'
  } as TypographyOptions,
  components: {
    MuiCssBaseline: {
      styleOverrides: MetricFontFaces // <== here
    },
    ...
  }
}

其中 MetricFontFaces 是一个巨大的 string，其中定义了所有 @font-face。虽然这适用于全局应用字体，但由于 MetricFontFaces 是一个字符串，我们无法轻松应用其他 CSS 样式。没有简单的方法（至少我找不到它们）通过 MuiCssBaseline.

提供 @font-face