如何在母体ui排版中添加更多变体

Question

在我正在设计的设计中，标题的样式更多

1. 带有Seri​​f错字的h1
2. h1和San Serif Typo

对于相同的H标签名称，反正还有更多的变化形式吗？将其添加到createMuiTheme

Answer 1

覆盖<Typography>组件的样式，然后使用h1变体：

import React from "react";

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

const SerifTypography = withStyles({ root: { fontFamily: "serif" } })(
  Typography
);
const SansSerifTypography = withStyles({ root: { fontFamily: "sans-serif" } })(
  Typography
);

export default function App() {
  return (
    <>
      <SerifTypography variant="h1">Serif</SerifTypography>
      <SansSerifTypography variant="h1">Sans Serif</SansSerifTypography>
    </>
  );
}

现场演示：