MUI 6 support upgrade : Grid2 does not have a width of 100% by default

[Revarh]

What you were expecting:
I am changing all my Grid components to MUI6 Grid2 and I should not see a change in appearance.

What happened instead:
The items' size is not taken into consideration. I realized that I need to add width="100%" to the Grid2 container to make it work. Has anyone had the same issue ?

Steps to reproduce:
Simply change all Grid components to Grid2, in a SimpleForm (regular or RBAC)

`

        <Grid2 size={6}>
          <TimeInput
            source="timeEnd"
            label="Fin du RDV"
            variant="outlined"
            fullWidth
          />
        </Grid2>
      </Grid2>

`

The other solution I found was to modify the component in the theme:

components: { MuiGrid2: { styleOverrides: { container: { width: '100%' }, }, }, },

Also, please note that ra-form-layout WizardToolbar uses the depreciated Grid instead of Grid2.

Environment

• React-admin version: 5.5.2
• Last version that did not exhibit the issue (if applicable): 4.16
• React version: 18.3
• Browser: Mozilla Firefox
• Stack trace (in case of a JS error): no JS error

[slax57]

Can you share a reproduction sandbox or stackblitz?

[slax57]

I've tried to use Grid2 in the e-commerce demo but did not run into this issue. So we'll definitely need a repro. Thanks.

[ivanchan5209]

I am facing the same issue when I upgraded from V5 to V6
Grid

Grid2

The UI will become:

[slax57]

We still need a repro to be able to help

[ivanchan5209]

Finally, I can share the project
please check with https://codesandbox.io/p/sandbox/shy-mountain-lq4vsc

[slax57]

@ivanchan5209 Thank you for the codesandbox.
However I can see it doesn't use react-admin at all.
To me this indicates that this is a MUI only issue.
Hence I'm closing this issue and inviting you to open an issue on the MUI repository instead.