Как установить пользовательские шрифты для тегов заголовка, тела и кнопки для пользовательского интерфейса материала?

Question

Я использую createMuiTheme, чтобы настроить мою тему с помощью Material UI. Как установить определенный шрифт для тегов заголовка, тела и кнопки?

Я предполагаю, что это будет настройка компонента оформления в теме. А затем выбрав его из компонента приложения. Но не могу найти никаких документов, касающихся этого.

Файл темы:

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

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