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' }),