diff --git a/packages/mui-material/src/Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js
index 87c952bca83cd7..533a3f0502d9e4 100644
--- a/packages/mui-material/src/Grid2/Grid2.test.js
+++ b/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('', () => {
testVariantProps: { container: true, spacing: 5 },
skip: ['componentsProp', 'classesRoot'],
}));
+
+ it('should render with the container class', () => {
+ render();
+ 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(
+
+
+ hello
+
+ ,
+ );
+ expect(screen.getByTestId('grid')).to.have.style('padding', '11px');
+ });
});
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
index 1d2841bafa74c1..99c4148d33f2ef 100644
--- a/packages/mui-material/src/Grid2/Grid2.tsx
+++ b/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' }),