changing default breakpoints in material ui is not working

user_11577960 0
Viewed 480

I am trying to change the default breakpoints in material ui from

\node_modules\@material-ui\system\breakpoints.js

and for example I change the value of sm from 600px to 426px

var values = {
  xs: 0,
  sm: 426,
  md: 960,
  lg: 1280,
  xl: 1920
};

and my components are rendered like so :

<Box display={{ xs: 'none',sm:"block"}}>
  <Row direction={"row-reverse"} divider={true} />
</Box>

I want the Box component to be hidden when screen width is smaller than 426px with the code I said it works but it hides the component when the width is smaller than 600px which is the default value of sm breakpoint so the value I entered is ignored by the theme provider

material-ui reactjs
1 Answers

Make sure you pass the breakpoint values to the theme option like this as stated in Material-UI docs

const values = {
  xs: 0,
  sm: 426,
  md: 960,
  lg: 1280,
  xl: 1920
};

const theme = createMuiTheme({
  breakpoints: {
    keys: ["xs", "sm", "md", "lg", "xl"],
    up: (key) => `@media (min-width:${values[key]}px)`
  }
});

Live Example

Edit Material-UI Breakpoints

user_94494260
Related