Unstable_Grid2 cannot override spacing in Nested Grid

[nzayatz14]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/optimistic-waterfall-qhrh60?file=/src/App.tsx

Current behavior 😯

Child <Grid2/> components continue to inherit spacing from upper-most <Grid2/> parent even if their spacing or their immediate parents spacing value is overridden.

Expected behavior 🤔

I think there could be 2 remedies to this:

1. A way to prevent inheriting spacing from parent <Grid2/> components. This could be in the form of a disableSpacingInheritance prop that could be set on the top-level <Grid2/> and would remove spacing inheritance for all <Grid2/> children it may have. This value could also be passed into the themes defaultProps object for Grid2 to disable spacing inheritance for a whole project.

2. If we truly want to inherit spacing by default, maybe its made so that child <Grid2/> components will inherit spacing from their nearest parent that has the spacing prop explicitly set, as opposed to inheriting the value from the upper-most parent.

My use case would have 1 prioritized over 2 but I think both would be good features for this.

Context 🔦

It would be nice to have a way to prevent <Grid2/> from inheriting spacing to restore functionality of the original MUI 4/5 <Grid/>.

I also think it would also be nice that, if spacing was to be inherited, it would be inherited from the closest parent that has spacing explicitly set.

More details of this are given in the Expected Behavior section

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.4
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    **Chrome: 109.0.5414.119** <--- currently using
    Edge: Not Found
    Firefox: 109.0
    Safari: 15.5
  npmPackages:
    @emotion/react: 11.10.5 => 11.10.5 
    @emotion/styled: 11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.114 
    @mui/core-downloads-tracker:  5.11.5 
    @mui/icons-material: 5.11.0 => 5.11.0 
    @mui/lab: 5.0.0-alpha.116 => 5.0.0-alpha.116 
    @mui/material: 5.11.5 => 5.11.5 
    @mui/private-theming:  5.11.2 
    @mui/styled-engine:  5.11.0 
    @mui/styles: 5.11.2 => 5.11.2 
    @mui/system:  5.11.5 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.2 
    @types/react: 18.0.27 => 18.0.27 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.4 => 4.9.4 

[siriwatknp]

I can reproduce it. There is no need to have disableSpacingInheritance. The spacing={0} should work.

[siriwatknp]

@nzayatz14 It is fixed in #35994, please have a look.

[nzayatz14]

@siriwatknp looks good, thanks! I'll keep an eye out for the merge.