Material-UI Typography with different variants

Question

How can I make that the typography component of Material-UI infers the variant from the text inside it?

I have the following code:

import React from 'react';
import './styles.css';
import {createMuiTheme} from '@material-ui/core/styles';
import {ThemeProvider} from '@material-ui/styles';
import Typography from '@material-ui/core/Typography';

const theme = createMuiTheme({
    typography: {
        h1: {
            fontSize: 200,
        },
        h2: {
            fontSize: 5,
        },
    },
});

export default function App() {
    return (
        <ThemeProvider theme={theme}>
            <Typography>
                <h1>Text H1</h1>
                <h2>Text H2</h2>
            </Typography>
        </ThemeProvider>
    );
}

When it renders, "Text H1" should have a font size of 200 and "Text H2" a font size of 5. Unfortunately, it's not like that.

Only if I change the variant prop of Typography to h1 or h2, it changes the font size. As I have a long text with different variants, I don't want to create a Typography element for each of them.

Here is a code sandbox of it: https://codesandbox.io/s/elegant-bouman-fz3j6?file=/src/App.js:0-604

Answer 1

If you want to override the h1/h2 of you should use the overrides option of the createMuiTheme function:

export const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      root: {
        "& h1": {
          color: "blue"
        },
        "& h2": {
          color: "red"
        }
      }
    }
  }
});

You can see a working example here: https://codesandbox.io/s/mui-theme-typography-override-styles-192jk?file=/demo.js