[Grid] Emotion overrides responsive properties (specificity problem?) #29451
Labels
component: Grid
The React component.
support: question
Community support but can be turned into an improvement
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
Steps to Reproduce 🕹
Steps:
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
The text was updated successfully, but these errors were encountered: