我正在使用createMuiThemeMaterial UI设置自定义主题。如何为页眉,正文和按钮标签设置特定的字体?
createMuiTheme
我假设它将自定义主题中的版式组件。然后从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);
以下是用于控制不同文本变体的字体系列的语法。
查看主题中可用属性的最简单方法是查看默认主题的结构: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" } } });