Как добавить еще вариант в типографике Matrial UI

Question

в дизайне, который я оформляю У меня есть больше, чем стиль для заголовка

1. h1 с опечаткой с засечками
2. h1 с опечаткой с засечками

В любом случае, иметь более одного варианта для одного и того же имени тега 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>
    </>
  );
}

Демонстрационная версия: