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: