[Container] - property `disableGutters` doesn't work if theme `styleOverrides` have been applied

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When the Container padding style is overridden, the disableGutters property stops working.

Expected behavior 🤔

The disableGutters property should work even with the style override.

Steps to reproduce 🕹

If the container style have been overridden, the disableGutters property won't work.

// theme.tsx
    ...
    components: {
      MuiContainer: {
        styleOverrides: {
          root: {
            [customBreakpoints.between('xs', 'sm')]: {
              padding: '0 20px',
            },
            [customBreakpoints.up('md')]: {
              padding: '0 90px',
            },
          },
        },
      },
    },
    ...

      <Container disableGutters> // won't remove gutters from 'xs' to 'sm' and above 'md'

Start by reproducing the issue from theme.tsx with a Container using disableGutters and the shown MuiContainer styleOverrides. Trace how the Container padding and style override are applied, then verify that disableGutters removes the overridden gutters at the affected breakpoints.