如何为Material UI的页眉，正文和按钮标签设置自定义字体? [英] How do I set custom fonts for header, body, and button tags for Material UI?

问题描述

我正在使用createMuiTheme通过Material UI设置自定义主题.如何为页眉，正文和按钮标签设置特定的字体?

I am using createMuiTheme to set customize my theme with Material UI. How do I set a specific font for the header, body, and button tags?

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

I'm assuming it would be customizing the typography component in the theme. And then selecting it from the App component. But can't find any documentation regarding this.

主题文件:

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);

推荐答案

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

Below is the syntax for controlling the font-family for different text variants.

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

The easiest way to look at the properties available in the theme is to look at the structure of the default theme: 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"
    }
  }
});

这篇关于如何为Material UI的页眉，正文和按钮标签设置自定义字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！