Nested grids for v2 are not behaving the same as in v1

[frekvent-szabolcs]

Search keywords

grid

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example.

Current behavior

Nesting a Grid container inside a Grid (item) previously (using v1) worked like v2 works when I wrap the nested Grid container in a fragment. Is this broken or expected behaviour?

Also, when I nest a Grid container inside a Grid item, lot of times (even in my example), the CSS variables are not defined:

Expected behavior

No response

Context

After migrating to v6 from v5, following the Guide I migrated Grid v1 to v2. Many of my grids broke. I either had to specify widths for the inner Grids or just add fragments between the parent end children grids.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[Janpot]

#43733 fixes this problem. See updated codesandbox.

Note that the behavior where nested grids inherit properties from the parent grid requires them to be direct children of the parent grid.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @frekvent-szabolcs! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!