diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
index 08188af737d19a..c4b4b854151cfd 100644
--- a/docs/pages/material-ui/api/grid-2.json
+++ b/docs/pages/material-ui/api/grid-2.json
@@ -53,7 +53,20 @@
},
"name": "Grid2",
"imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"],
- "classes": [],
+ "classes": [
+ {
+ "key": "container",
+ "className": "MuiGrid2-container",
+ "description": "Styles applied to the root element if `container={true}`.",
+ "isGlobal": false
+ },
+ {
+ "key": "root",
+ "className": "MuiGrid2-root",
+ "description": "Styles applied to the root element.",
+ "isGlobal": false
+ }
+ ],
"spread": true,
"themeDefaultProps": true,
"muiName": "MuiGrid2",
diff --git a/docs/translations/api-docs/grid-2/grid-2.json b/docs/translations/api-docs/grid-2/grid-2.json
index ef2a4d9cb8bba9..65a9cda1b84578 100644
--- a/docs/translations/api-docs/grid-2/grid-2.json
+++ b/docs/translations/api-docs/grid-2/grid-2.json
@@ -26,5 +26,12 @@
"description": "Defines the flex-wrap
style property. It's applied for all screen sizes."
}
},
- "classDescriptions": {}
+ "classDescriptions": {
+ "container": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "container={true}
"
+ },
+ "root": { "description": "Styles applied to the root element." }
+ }
}
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
index d3d2a873bb52a7..1d2841bafa74c1 100644
--- a/packages/mui-material/src/Grid2/Grid2.tsx
+++ b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -7,8 +7,6 @@ import requirePropFactory from '../utils/requirePropFactory';
import { Theme, styled, Breakpoint } from '../styles';
import { useDefaultProps } from '../DefaultPropsProvider';
-export type Grid2Slot = 'root';
-
type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null };
export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
diff --git a/packages/mui-material/src/Grid2/grid2Classes.ts b/packages/mui-material/src/Grid2/grid2Classes.ts
index 1b530ed7f33680..86c936bc30bb61 100644
--- a/packages/mui-material/src/Grid2/grid2Classes.ts
+++ b/packages/mui-material/src/Grid2/grid2Classes.ts
@@ -1,8 +1,14 @@
-import { GridClasses } from '@mui/system/Grid';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export type Grid2ClassKey = keyof GridClasses;
+export interface Grid2Classes {
+ /** Styles applied to the root element. */
+ root: string;
+ /** Styles applied to the root element if `container={true}`. */
+ container: string;
+}
+
+export type Grid2ClassKey = keyof Grid2Classes;
export function getGrid2UtilityClass(slot: string): string {
return generateUtilityClass('MuiGrid2', slot);
@@ -13,7 +19,7 @@ const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
-const grid2Classes: GridClasses = generateUtilityClasses('MuiGrid2', [
+const grid2Classes: Grid2Classes = generateUtilityClasses('MuiGrid2', [
'root',
'container',
diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts
index e9616276ef22fe..2f21e1ff6bab57 100644
--- a/packages/mui-material/src/styles/createTheme.spec.ts
+++ b/packages/mui-material/src/styles/createTheme.spec.ts
@@ -155,6 +155,16 @@ const theme = createTheme();
},
},
},
+ MuiGrid2: {
+ styleOverrides: {
+ root: {
+ justifyContent: 'space-between',
+ },
+ container: {
+ justifyContent: 'space-between',
+ },
+ },
+ },
},
});
}
diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts
index 4228da8c3e8f33..4f5e53a43a28c0 100644
--- a/packages/mui-material/src/styles/overrides.d.ts
+++ b/packages/mui-material/src/styles/overrides.d.ts
@@ -45,7 +45,7 @@ import { FormGroupClassKey } from '../FormGroup';
import { FormHelperTextClassKey } from '../FormHelperText';
import { FormLabelClassKey } from '../FormLabel';
import { GridClassKey } from '../Grid';
-import { Grid2Slot } from '../Grid2';
+import { Grid2ClassKey } from '../Grid2';
import { IconButtonClassKey } from '../IconButton';
import { IconClassKey } from '../Icon';
import { ImageListClassKey } from '../ImageList';
@@ -190,7 +190,7 @@ export interface ComponentNameToClassKey {
MuiFormHelperText: FormHelperTextClassKey;
MuiFormLabel: FormLabelClassKey;
MuiGrid: GridClassKey;
- MuiGrid2: Grid2Slot;
+ MuiGrid2: Grid2ClassKey;
MuiIcon: IconClassKey;
MuiIconButton: IconButtonClassKey;
MuiImageList: ImageListClassKey;