Grid2 nested Grids - missing variables

[PantherX99]

I use nested Grid2 grids in my component. The nested grids get variables for each level with the number of level. Instead of just using the values of the parent grid, it mirrors the values in new variables. In my case, this results in the following variable being used but never being assigned. var(--Grid-columnsLevel2)

This is another grid inside another grid as an example. In the width property, the variable --Grid-columnsLevel1 is used but never assigned: ` <DatePicker sx={{width: "70%"}} label="Versandtag" value={props.datum} onChange={props.onChange} disablePast={true}/>

props.onChangeLieferterminFix(event.target.checked)}/>} label="Fix"/>

`

I do not know when this error occurred, because at the beginning it all worked fine. Switch back to previous commits does not help, so i do not think it's an error in my code.

Any suggestions?

Version: 5.13.3

[hbjORbj]

Can you copy/paste your code into a Codesandbox so I can debug it? Here is a template: https://codesandbox.io/s/mui-issue-latest-s2dsx

[PantherX99]

Can you copy/paste your code into a Codesandbox so I can debug it? Here is a template: https://codesandbox.io/s/mui-issue-latest-s2dsx

https://codesandbox.io/s/strange-jackson-r4yznr

I hope I have done it right.

[micky2be]

Went through the code quickly and seems the level is getting incremented for each level of Grid regardless if it's a container or not. While the CSS variables are obviously created for the containers.

• Increments unstable_level for each Grid in the tree: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/Unstable_Grid/createGrid.tsx#L164-L171

• Writes CSS variable if only for containers using own unstable_level: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/Unstable_Grid/gridGenerator.ts#L108-L119

• Uses CSS variable of unstable_level - 1, which based on the above might not be a container https://github.com/mui/material-ui/blob/master/packages/mui-system/src/Unstable_Grid/gridGenerator.ts#L38-L43

I can't know for sure as I'm using this library only for a couple of days, so I'm not too familiar with the source, but if not that, I shouldn't be too far off.

[micky2be]

In the mean time, for those who needs to use Grid2, make sure your Grid container is a direct child of another Grid container.

Or do the complete opposite. Put a non Grid element in between, like a Box. You won't get any inheritance but at least it won't break.

[allicanseenow]

I can replicate the issue with this code

<Grid container>
  <Grid>
     <Grid container>
        <Grid />

--Grid-columnsLevel1 was not set The quick solution for me is to put any component between the first Grid item and the second Grid container, including a Fragment, like this

<Grid container>
  <Grid>
    <>
      Grid container>
        <Grid />

This will prevent the second container from being treated as a nested Grid container