Grid2 and Fragment: missing padding on Grid item

[mauro-ni]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/festive-ully-7fjqbf

Current behavior 😯

In the provided example the grid item "L2 (Fragment) - Node" doesn't get the padding.

Expected behavior 🤔

In the provided example the grid item "L2 (Fragment) - Node" should get the padding according to the container.

Context 🔦

I have a complex structure with nested Grid2 containers, the new implementation (from v5.12.1) breaks the layout of my components.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.0.0 - /usr/local/bin/node
    Yarn: 3.4.1 - /opt/homebrew/bin/yarn
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: Not Found
    Firefox: 112.0.2
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base: ^5.0.0-alpha.127 => 5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/lab: ^5.0.0-alpha.128 => 5.0.0-alpha.128 
    @mui/material: ^5.12.2 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system: ^5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.11.13 
    @mui/x-data-grid:  6.2.1 
    @mui/x-data-grid-premium: ^6.2.1 => 6.2.1 
    @mui/x-data-grid-pro:  6.2.1 
    @mui/x-date-pickers:  6.2.1 
    @mui/x-date-pickers-pro: ^6.2.1 => 6.2.1 
    @mui/x-license-pro:  6.0.4 
    @types/react:  18.0.14 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.7.4 

I'm using Google Chrome

[siriwatknp]

We use unstable_level prop to calculate for a nested grid internally. For this case, you can explicitly force the grid container to have a specific level:

<>
  <Grid2 xs={12} sx={{ backgroundColor: "yellow" }}>
    L1 (Fragment) - Node
  </Grid2>
  <Grid2
    unstable_level={1} // the `unstable_level` starts from 0 (the root grid), so this one should be `1`.
    xs={12}
    container
    sx={{ backgroundColor: "red" }}
  >
    <Grid2 xs={12} sx={{ backgroundColor: "green" }}>
      L2 (Fragment) - Node (NO PADDING ???)
    </Grid2>
  </Grid2>
</>

https://codesandbox.io/s/morning-sea-h2kg1m?file=/src/App.tsx:505-904

[mauro-ni]

@siriwatknp thx, it works.

Will specifying the level be the way to go on stable release of Grid2?

Many thanks, Mauro

[andrewizbatista]

Bump issue. Just updated and it also broke the spacing(s) in my UI.

(PS: I have a similar env to what @mauro-ni posted above)

[notzippy]

Here is another example how spacing has changes have affected TextFields in a negative manner. The form labels are overlapping the lines.