[Grid] Emotion overrides responsive properties (specificity problem?)

[rustlestuff]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Grid item max-width is set to 'none' by .css-1vpwcmr-MuiGrid-root>.MuiGrid-item

Expected Behavior 🤔

Grid item max-width respects media query set by xs, sm, etc. attributes

@media (min-width: 600px)
.css-wdtwov-MuiGrid-root {
  (...)
  max-with: 50%;
}

Steps to Reproduce 🕹

Steps:

1. Create codesandbox w/ official React template
2. Add MUI v5 dependencies [@mui/material, @emotion/react, @emotion/styled]
3. Replace App content with Container, Grid container, Grid items and desired content
4. Do the same for a v4 sandbox for comparison [@material-ui/core, @material-ui/lab]

Context 🔦

For my landing page banner I want to have a H1 and Autocomplete on top of each other, aligned left and vertically centered on a background image. For mobile devices I want the Grid items to take up 12 columns, for all other screen sizes: 6 columns. So I wrapped the H1 and Autocomplete with <Grid item xs={12} sm={6}>.

I realized the responsive values might be ignored by direction="column" as mentioned in the docs. But I didn't have an issue with this until migrating to MUI v5.

I also wrapped my Grid container with a <Container maxWidth={false}> to fix some Grid spacing issues. Removing the Container in my code sandbox seems to break the max-width altogether (toggling it in devtools no longer has an effect).

Your Environment 🌎

I used Chrome Version 94.0.4606.81 (Official Build) (64-bit)
v5 codesandbox
v4 codesandbox

[mnajdova]

Thanks for the report. @hbjORbj is this the same as #29379?

[hbjORbj]

@rustlestuff Hi. To better understand your problem, I created this codesandbox. There is no problem in this demo, so maybe I am missing something. Can you fork this codesandbox and provide me with one that shows your issue more clearly?

[rustlestuff]

@hbjORbj Hi there. You are missing direction="column" on <Grid container spacing={1}>
If that's the wrong way of going about implementing the Grid, please let me know.

[hbjORbj]

@rustlestuff Sorry for such a late response.

I realized the responsive values might be ignored by direction="column" as mentioned in the docs.

This is correct. The xs, sm, md, lg, and xl props are not supported within direction="column" and direction="column-reverse" containers.

But I didn't have an issue with this until migrating to MUI v5.

I understand, but I don't think we intentionally supported this behaviour in v4.

For your use case, I suggest one of the following two approaches: codesandbox 1 and codesandbox 2.

The behaviour in either is the same as in the v4 codesandbox you provided earlier :)