How to set breakpoints when overriding theme variables in createMuiTheme

Question

I'm trying to set the default theme typography font sizes to change based on breakpoints. For example, when the breakpoint is at the {xs} value, change theme.typography.h4.fontSize to '1.5rem'. At all other breakpoints, leave it at the default value ('2.125rem').

I can do this easily in components using the following code example:

const useStyles = makeStyles(theme => ({
    title: {
        [theme.breakpoints.down('xs')]: {
            fontSize: '1.5rem',
        }
    },
}))

However, this means having to add the same code to every single component that has <Typography variant='h4'> in it. If I decide to change the value from '1.5rem' to '1.25rem', I would need to locate every single instance of <Typography variant='h4'> and change it manually.

Is there any way to add breakpoints to createMuiTheme so it applies to all instances?

I have attempted the following, which does not work:

const defaultTheme = createMuiTheme()

const theme = createMuiTheme({
    typography: {
        h4: {
            [defaultTheme.breakpoints.down('xs')]: {
                fontSize: '1.5rem'
            }
        }
    }
})

Answer 1

You can use custom breakpoints with createBreakpoints.

Here is an example changing the MuiButton

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'

const customBreakpointValues = {
  values: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
  },
}

const breakpoints = createBreakpoints({ ...customBreakpointValues })

const theme = createMuiTheme({
  breakpoints: {
    ...customBreakpointValues,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          padding: '10px',
          [breakpoints.up('lg')]: {
            padding: '20px',
          },
        },
      },
    },
  },
})

Answer 2

CORRECTION: Initially I indicated that your solution didn't work because you were using an impossible condition, but I was incorrect. "down" from xs is inclusive of xs, so it does what you would want (matches 0px to 600px).

I'm not sure what I did in my initial testing that led me astray, but one thing that can cause confusion is if you have multiple down thresholds. In my own testing, I had an easier time avoiding shooting myself in the foot (e.g. by having a breakpoints.down("xs") followed by a later breakpoints.down("sm") that trumped the "xs" settings) by using breakpoints.only.

From https://material-ui.com/layout/breakpoints/#breakpoints

• xs, extra-small: 0px or larger
• sm, small: 600px or larger

Here is an updated sandbox that shows a little more clearly what is happening: