title: Media queries in MUI components
body: <p>I am using MUI components in <code>ReactJs</code> project, for some reason I need customization in some components to make it responsive according to screen width.</p>
  <p>I have added <code>media query</code> and pass it as style attribute in the components but not working, any idea?</p>
  <p>I am using code like this:</p>
  <pre><code>const drawerWidth = {
    width: '50%',
    '@media(minWidth: 780px)' : {
      width: '80%'
    }
  }
  
  &lt;Drawer
    .....
    containerStyle = {drawerStyle}
   &gt;
   &lt;/Drawer&gt;
  </code></pre>
  <p>Code is working for web only, on mobile device no effect. Even <code>CSS</code> code is not applying I've checked in developer console. I am using MUI version <strong>0.18.7</strong>.</p>
  <p>Any help would be appreciated.</p>
  <p>PS: As per requirement I need to make some changes according to screen size using <code>CSS</code>.</p>