小编典典

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

reactjs

我正在使用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);

阅读 290

收藏
2020-07-22

共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"
    }
  }
});

编辑自定义字体系列

2020-07-22