How to set breakpoints when overriding theme variables in createMuiTheme

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',
          },
        },
      },
    },
  },
})

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: