[theme] Allow custom typography variants

MUI allows you to add custom keys to the theme configuration. However, there is no way to expand the design system unless you create a whole new component. Allowing MUI components to reference custom theme keys would bring customization to a whole nother level.

createMuiTheme({
  typography: {
    poster: {
     fontSize: '5.8rem'
    },
  },
});

Usage:

<Typography variant="poster">Super big headline</Typography>

[oliviertassinari]

We have fixed the underlying technical issue in #23841. Now, developers can do 🎉:

import * as React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const theme = createMuiTheme({
  typography: {
    poster: {
      color: "red"
    },
    h3: null
  }
});

declare module "@material-ui/core/styles/createTypography" {
  interface Typography {
    poster: React.CSSProperties;
  }

  // allow configuration using `createMuiTheme`
  interface TypographyOptions {
    poster?: React.CSSProperties;
  }
}

declare module "@material-ui/core/Typography/Typography" {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

export default function FontSizeTheme() {
  return (
    <ThemeProvider theme={theme}>
      {/* A new variant */}
      <Typography variant="poster">poster</Typography>
      {/* You can also disable variants */}
      <Typography variant="h3">h3</Typography>
    </ThemeProvider>
  );
}

https://codesandbox.io/s/fontsizetheme-material-demo-forked-l9u05?file=/demo.tsx

I believe the last step is to properly document it. Maybe inside https://next.material-ui.com/customization/typography/? @mnajdova

[Lane]

if someone wants to do this in V4, you can wrap the Material UI component with some of your own variants:

import { Typography as MuiTypography, withStyles } from "@material-ui/core";
import clsx from "clsx";

const style = (theme) => ({
  number: {
    fontSize: theme.typography.pxToRem(20),
    fontWeight: 700,
  },
  label: {
    fontSize: theme.typography.pxToRem(11.5),
    letterSpacing: "0.05em",
    fontStyle: "italic",
  },
});

/**
 * Overrides default material UI typography with some additional variants
 */
const Typography = ({ variant, classes, className, ...props }) => {
  const isCustom = Object.keys(classes).indexOf(variant) > -1;
  return (
    <MuiTypography
      className={isCustom ? clsx(classes[variant], className) : className}
      variant={isCustom ? undefined : variant}
      {...props}
    />
  );
};

export default withStyles(style)(Typography);

then using the typography component above, you can use your own variants:

<Typography variant="number">42</Typography>

not as nice as being able to define in the theme, but it works 🤷