Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings.
@media screen and (min-width: 0px) and (max-width: 400px) {
body { background-color: red; }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
body { background-color: blue; }
}
@media screen and (min-width: 600px) {
body { background-color: green; }
}
Trying to implement the same breakpoints in a Material UI theme but running into issues. Here's what I've attempted so far:
const defaultTheme = createMuiTheme();
export const theme = createMuiTheme({
palette: {
background: {
[defaultTheme.breakpoints.down('sm')]: {
default: 'red'
}
},
}
});
Not sure if this approach is supported by Material UI. Any insights would be appreciated.