While using Material-UI v4 with makeStyles/useStyle custom CSS had precedence over media queries. Now with v5 and Emotion it seems like you have to additionally override material-ui's media query css as it is loading after custom css, having precedence over your own css.
Image 1 is showing additional style applied to import { Container } from '@material-ui/core' component with makeStyle, purple, and it is on top, so padding is always 80px.
Image 2 is showing the same container styled with Emotion, purple is custom css, and red rectangle show's material-ui's media query css for that component having precedence
Adding media query in css solves this problem, for example like this
<Container maxWidth="lg"
css={css`
margin-top: 80px;
padding: 80px;
@media (min-width: 600px) {
padding: 80px;
color: yellow;
}
`}
{...rest}>
{children}
</Container>
Image 3, with added mediaquery your own mq is now on top having precedence.
Now i am just wondering is this expected behavior, that now we need to override all media queries by MUI, or there is something in the configuration we need to do.
Btw, one configuration generally suggested for this setup is already there
<ThemeProvider theme={themeConfiguration}>
<StyledEngineProvider injectFirst>
<StylesProvider jss={jss}>
<CssBaseline />