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… making 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