在 Material UI 主题中扩展排版答案

【问题标题】：Extend typography in Material UI theme在 Material UI 主题中扩展排版
【发布时间】：2020-01-22 13:24:58
【问题描述】：

这是否可以在 Material UI 主题中定义额外的字体（字体系列）。我想得到这样的东西：

export const theme = createMuiTheme({
    typography: {
        fontFamily: '"Open Sans", sans-serif',
        fontFamilyPrimary: '"Lato", sans-serif',
        fontFamilySecondary: '"Nunito", sans-serif',
    },
});

【问题讨论】：

您想如何使用这些额外的字体系列？您是想将它们映射到特定的 Typography 变体（例如，variant="subtitle1" 始终使用 fontFamilyPrimary）还是只想能够在自定义组件中利用它们？
@RyanCogswell 只是希望能够在自定义组件中利用它们。例如像这样：const useStyles = makeStyles((theme: Theme) => ({ root: { fontFamily: theme.typography.fontFamilyPrimary, } }));
您在尝试执行此操作时遇到问题了吗？
是的，我试过了。当我定义 fontFamilyPrimary 时出现错误：Object literal may only specify known properties, and 'fontFamilyPrimary' does not exist in type 'TypographyOptions | ((palette: Palette) => TypographyOptions)'.
我自己不使用 TypeScript，所以对此我帮不上什么忙。如果你使用any 来克服 TypeScript 错误，它可以正常工作吗？

标签： reactjs material-ui

【解决方案1】：

我只需要这样做。解决方案是扩充 createTypography 模块定义并添加您需要的内容。

declare module '@material-ui/core/styles/createTypography' {
  interface FontStyle {
    fontFamilySecondary: string;
  }
}

【讨论】：