Responsive typography in Material-UI?

Question

Designs commonly have smaller headline fonts for mobile designs.

Does Material-UI have a mechanism for making the typography responsive?

I see that the default theme has the font sizes defined in rems - does that mean it's a matter of just reducing the base font-size? (That doesn't seem to work, what if you want to reduce the headline fonts at different rates).

Answer 1

Update

MUI v4 has responsive typography built in! Check here for details.

Old response

@luke's answer is great. I wanted to add some detail to make this work in practice, because both breakpoints and pxToRem are accessible on the theme object ... meaking this becomes a chicken and egg problem! My approach:

import { createMuiTheme } from "@material-ui/core"

const defaultTheme = createMuiTheme({ ... customisations that don’t rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme

const theme = {
  ...defaultTheme,
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "5rem",
        [breakpoints.down("xs")]: {
          fontSize: "3rem"
        }
      }
    }
  }
}

export default theme

Hope this is of use to somebody!