Media queries in Material-ui components

Question

I am using Material-ui components in ReactJs project, for some reason I need customization in some components to make it responsive according to screen width.

I have added media query and pass it as style attribute in the components but not working, any idea?

I am using code like this:

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

Code is working for web only, on mobile device no effect. Even CSS code is not applying I've checked in developer console. I am using material-ui version 0.18.7.

Any help would be appreciated.

PS: As per requirement I need to make some changes according to screen size using CSS.

Answer 1

By using the breakpoints attribute of the theme, you can utilize the same breakpoints used for the Grid and Hidden components directly in your component.

API

theme.breakpoints.up(key) => media query

Arguments

key (String | Number): A breakpoint key (xs, sm, etc.) or a screen width number in pixels.

Returns media query: A media query string ready to be used with JSS.

Examples

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

for more information check this out