Media queries in MUI components

I am using MUI 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 MUI 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.

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

So here is what you can do (quick hack). Material UI will complain about you doing an unnecessary calculation though.

const styles = {
  drawerWidth: {
    width: '50%',
    ['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key
      width: '80%'
    }
  }
}