Typography

Roboto Font

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

import 'typeface-roboto';

Component

import React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    width: '100%',
    maxWidth: 500,
  },
});

export default function Types() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Typography variant="h1" gutterBottom>
      </Typography>
      <Typography variant="h6" gutterBottom>
      </Typography>
      <Typography variant="subtitle2" gutterBottom>
      </Typography>
      <Typography variant="body2" gutterBottom>
      </Typography>
      <Typography variant="button" display="block" gutterBottom>
      </Typography>
      <Typography variant="caption" display="block" gutterBottom>
      </Typography>
      <Typography variant="overline" display="block" gutterBottom>
      </Typography>
    </div>
  );
}

セマンティック要素の変更

const theme = createMuiTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h1: 'h2',
        h2: 'h2',
        h3: 'h2',
        h4: 'h2',
        h5: 'h2',
        h6: 'h2',
        subtitle1: 'h2',
        subtitle2: 'h2',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});