[Grid2] Add container styles from styleOverrides (#44598)

packages/mui-material/src/Grid2/Grid2.test.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import Grid2, { grid2Classes as classes } from '@mui/material/Grid2';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { expect } from 'chai';
 import describeConformance from '../../test/describeConformance';
 
 // The main tests are in mui-system Grid folder
@@ -20,4 +22,31 @@ describe('<Grid2 />', () => {
     testVariantProps: { container: true, spacing: 5 },
     skip: ['componentsProp', 'classesRoot'],
   }));
+
+  it('should render with the container class', () => {
+    render(<Grid2 data-testid="grid" container />);
+    expect(screen.getByTestId('grid')).to.have.class(classes.container);
+  });
+
+  it('should have container styles passed from theme', () => {
+    const theme = createTheme({
+      components: {
+        MuiGrid2: {
+          styleOverrides: {
+            container: {
+              padding: '11px',
+            },
+          },
+        },
+      },
+    });
+    render(
+      <ThemeProvider theme={theme}>
+        <Grid2 data-testid="grid" container>
+          hello
+        </Grid2>
+      </ThemeProvider>,
+    );
+    expect(screen.getByTestId('grid')).to.have.style('padding', '11px');
+  });
 });

packages/mui-material/src/Grid2/Grid2.tsx

@@ -127,7 +127,10 @@ const Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: (props, styles) => {
+      const { ownerState } = props;
+      return [styles.root, ownerState.container && styles.container];
+    },
   }),
   componentName: 'MuiGrid2',
   useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }),