如何为 Material UI 的标题、正文和按钮标签设置自定义字体?

IT技术 javascript reactjs material-ui
2021-05-21 16:36:07

我正在使用createMuiThemeMaterial UI 设置自定义我的主题。如何为标题、正文和按钮标签设置特定字体?

我假设它将自定义主题中的排版组件。然后从 App 组件中选择它。但是找不到任何关于此的文档。

主题文件:

import { createMuiTheme } from "@material-ui/core/styles";

export default createMuiTheme({
 typography: {
    fontFamily: ["campton-book", "campton-light", "campton-medium"].join(",")
//something here setting specific font family for specific tags?
  }
});

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Theme from "../Theme";

const styles = theme => ({
  root: {
    flexGrow: 1
  }
});

class Tools extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={Theme}>
       <Typography variant="h2">Some text here as h2 and the "campton-light" font family</Typography>
       <Typography variant="body1">Some text here as body1 and the "campton-book" font family</Typography>
       <Typography variant="overline">Some text here as overline and the "campton-medium" font family</Typography>
      </MuiThemeProvider>
    );
  }
}

Apps.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Apps);

1个回答

以下是用于控制不同文本变体的字体系列的语法。

查看主题中可用属性的最简单方法是查看默认主题的结构:https : //material-ui.com/customization/default-theme/

const theme = createMuiTheme({
  typography: {
    h1: {
      fontFamily: "Comic Sans MS"
    },
    h2: {
      fontFamily: "Arial"
    },
    h3: {
      fontFamily: "Times New Roman"
    },
    h4: {
      fontFamily: "verdana"
    },
    button: {
      fontFamily: "Comic Sans MS"
    }
  }
});

编辑自定义字体系列