Media queries in MUI components

Question

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.

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