diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
index 274c25ce265e93..08188af737d19a 100644
--- a/docs/pages/material-ui/api/grid-2.json
+++ b/docs/pages/material-ui/api/grid-2.json
@@ -53,323 +53,7 @@
},
"name": "Grid2",
"imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"],
- "classes": [
- {
- "key": "container",
- "className": "MuiGrid2-container",
- "description": "Styles applied to the root element if `container={true}`.",
- "isGlobal": false
- },
- {
- "key": "direction-xs-column",
- "className": "MuiGrid2-direction-xs-column",
- "description": "Styles applied to the root element if `direction=\"column\"`.",
- "isGlobal": false
- },
- {
- "key": "direction-xs-column-reverse",
- "className": "MuiGrid2-direction-xs-column-reverse",
- "description": "Styles applied to the root element if `direction=\"column-reverse\"`.",
- "isGlobal": false
- },
- {
- "key": "direction-xs-row",
- "className": "MuiGrid2-direction-xs-row",
- "description": "Styles applied to the root element if `direction=\"row\"`.",
- "isGlobal": false
- },
- {
- "key": "direction-xs-row-reverse",
- "className": "MuiGrid2-direction-xs-row-reverse",
- "description": "Styles applied to the root element if `direction=\"row-reverse\"`.",
- "isGlobal": false
- },
- { "key": "grid-lg-1", "className": "MuiGrid2-grid-lg-1", "description": "", "isGlobal": false },
- {
- "key": "grid-lg-10",
- "className": "MuiGrid2-grid-lg-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-lg-11",
- "className": "MuiGrid2-grid-lg-11",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-lg-12",
- "className": "MuiGrid2-grid-lg-12",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-lg-2", "className": "MuiGrid2-grid-lg-2", "description": "", "isGlobal": false },
- { "key": "grid-lg-3", "className": "MuiGrid2-grid-lg-3", "description": "", "isGlobal": false },
- { "key": "grid-lg-4", "className": "MuiGrid2-grid-lg-4", "description": "", "isGlobal": false },
- { "key": "grid-lg-5", "className": "MuiGrid2-grid-lg-5", "description": "", "isGlobal": false },
- { "key": "grid-lg-6", "className": "MuiGrid2-grid-lg-6", "description": "", "isGlobal": false },
- { "key": "grid-lg-7", "className": "MuiGrid2-grid-lg-7", "description": "", "isGlobal": false },
- { "key": "grid-lg-8", "className": "MuiGrid2-grid-lg-8", "description": "", "isGlobal": false },
- { "key": "grid-lg-9", "className": "MuiGrid2-grid-lg-9", "description": "", "isGlobal": false },
- {
- "key": "grid-lg-auto",
- "className": "MuiGrid2-grid-lg-auto",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-lg-true",
- "className": "MuiGrid2-grid-lg-true",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-md-1", "className": "MuiGrid2-grid-md-1", "description": "", "isGlobal": false },
- {
- "key": "grid-md-10",
- "className": "MuiGrid2-grid-md-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-md-11",
- "className": "MuiGrid2-grid-md-11",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-md-12",
- "className": "MuiGrid2-grid-md-12",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-md-2", "className": "MuiGrid2-grid-md-2", "description": "", "isGlobal": false },
- { "key": "grid-md-3", "className": "MuiGrid2-grid-md-3", "description": "", "isGlobal": false },
- { "key": "grid-md-4", "className": "MuiGrid2-grid-md-4", "description": "", "isGlobal": false },
- { "key": "grid-md-5", "className": "MuiGrid2-grid-md-5", "description": "", "isGlobal": false },
- { "key": "grid-md-6", "className": "MuiGrid2-grid-md-6", "description": "", "isGlobal": false },
- { "key": "grid-md-7", "className": "MuiGrid2-grid-md-7", "description": "", "isGlobal": false },
- { "key": "grid-md-8", "className": "MuiGrid2-grid-md-8", "description": "", "isGlobal": false },
- { "key": "grid-md-9", "className": "MuiGrid2-grid-md-9", "description": "", "isGlobal": false },
- {
- "key": "grid-md-auto",
- "className": "MuiGrid2-grid-md-auto",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-md-true",
- "className": "MuiGrid2-grid-md-true",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-sm-1", "className": "MuiGrid2-grid-sm-1", "description": "", "isGlobal": false },
- {
- "key": "grid-sm-10",
- "className": "MuiGrid2-grid-sm-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-sm-11",
- "className": "MuiGrid2-grid-sm-11",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-sm-12",
- "className": "MuiGrid2-grid-sm-12",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-sm-2", "className": "MuiGrid2-grid-sm-2", "description": "", "isGlobal": false },
- { "key": "grid-sm-3", "className": "MuiGrid2-grid-sm-3", "description": "", "isGlobal": false },
- { "key": "grid-sm-4", "className": "MuiGrid2-grid-sm-4", "description": "", "isGlobal": false },
- { "key": "grid-sm-5", "className": "MuiGrid2-grid-sm-5", "description": "", "isGlobal": false },
- { "key": "grid-sm-6", "className": "MuiGrid2-grid-sm-6", "description": "", "isGlobal": false },
- { "key": "grid-sm-7", "className": "MuiGrid2-grid-sm-7", "description": "", "isGlobal": false },
- { "key": "grid-sm-8", "className": "MuiGrid2-grid-sm-8", "description": "", "isGlobal": false },
- { "key": "grid-sm-9", "className": "MuiGrid2-grid-sm-9", "description": "", "isGlobal": false },
- {
- "key": "grid-sm-auto",
- "className": "MuiGrid2-grid-sm-auto",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-sm-true",
- "className": "MuiGrid2-grid-sm-true",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-xl-1", "className": "MuiGrid2-grid-xl-1", "description": "", "isGlobal": false },
- {
- "key": "grid-xl-10",
- "className": "MuiGrid2-grid-xl-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xl-11",
- "className": "MuiGrid2-grid-xl-11",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xl-12",
- "className": "MuiGrid2-grid-xl-12",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-xl-2", "className": "MuiGrid2-grid-xl-2", "description": "", "isGlobal": false },
- { "key": "grid-xl-3", "className": "MuiGrid2-grid-xl-3", "description": "", "isGlobal": false },
- { "key": "grid-xl-4", "className": "MuiGrid2-grid-xl-4", "description": "", "isGlobal": false },
- { "key": "grid-xl-5", "className": "MuiGrid2-grid-xl-5", "description": "", "isGlobal": false },
- { "key": "grid-xl-6", "className": "MuiGrid2-grid-xl-6", "description": "", "isGlobal": false },
- { "key": "grid-xl-7", "className": "MuiGrid2-grid-xl-7", "description": "", "isGlobal": false },
- { "key": "grid-xl-8", "className": "MuiGrid2-grid-xl-8", "description": "", "isGlobal": false },
- { "key": "grid-xl-9", "className": "MuiGrid2-grid-xl-9", "description": "", "isGlobal": false },
- {
- "key": "grid-xl-auto",
- "className": "MuiGrid2-grid-xl-auto",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xl-true",
- "className": "MuiGrid2-grid-xl-true",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-xs-1", "className": "MuiGrid2-grid-xs-1", "description": "", "isGlobal": false },
- {
- "key": "grid-xs-10",
- "className": "MuiGrid2-grid-xs-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xs-11",
- "className": "MuiGrid2-grid-xs-11",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xs-12",
- "className": "MuiGrid2-grid-xs-12",
- "description": "",
- "isGlobal": false
- },
- { "key": "grid-xs-2", "className": "MuiGrid2-grid-xs-2", "description": "", "isGlobal": false },
- { "key": "grid-xs-3", "className": "MuiGrid2-grid-xs-3", "description": "", "isGlobal": false },
- { "key": "grid-xs-4", "className": "MuiGrid2-grid-xs-4", "description": "", "isGlobal": false },
- { "key": "grid-xs-5", "className": "MuiGrid2-grid-xs-5", "description": "", "isGlobal": false },
- { "key": "grid-xs-6", "className": "MuiGrid2-grid-xs-6", "description": "", "isGlobal": false },
- { "key": "grid-xs-7", "className": "MuiGrid2-grid-xs-7", "description": "", "isGlobal": false },
- { "key": "grid-xs-8", "className": "MuiGrid2-grid-xs-8", "description": "", "isGlobal": false },
- { "key": "grid-xs-9", "className": "MuiGrid2-grid-xs-9", "description": "", "isGlobal": false },
- {
- "key": "grid-xs-auto",
- "className": "MuiGrid2-grid-xs-auto",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "grid-xs-true",
- "className": "MuiGrid2-grid-xs-true",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "root",
- "className": "MuiGrid2-root",
- "description": "Styles applied to the root element.",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-0",
- "className": "MuiGrid2-spacing-xs-0",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-1",
- "className": "MuiGrid2-spacing-xs-1",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-10",
- "className": "MuiGrid2-spacing-xs-10",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-2",
- "className": "MuiGrid2-spacing-xs-2",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-3",
- "className": "MuiGrid2-spacing-xs-3",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-4",
- "className": "MuiGrid2-spacing-xs-4",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-5",
- "className": "MuiGrid2-spacing-xs-5",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-6",
- "className": "MuiGrid2-spacing-xs-6",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-7",
- "className": "MuiGrid2-spacing-xs-7",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-8",
- "className": "MuiGrid2-spacing-xs-8",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "spacing-xs-9",
- "className": "MuiGrid2-spacing-xs-9",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "wrap-xs-nowrap",
- "className": "MuiGrid2-wrap-xs-nowrap",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "wrap-xs-wrap",
- "className": "MuiGrid2-wrap-xs-wrap",
- "description": "",
- "isGlobal": false
- },
- {
- "key": "wrap-xs-wrap-reverse",
- "className": "MuiGrid2-wrap-xs-wrap-reverse",
- "description": "",
- "isGlobal": false
- }
- ],
+ "classes": [],
"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 8f52d5af176b48..ef2a4d9cb8bba9 100644
--- a/docs/translations/api-docs/grid-2/grid-2.json
+++ b/docs/translations/api-docs/grid-2/grid-2.json
@@ -26,116 +26,5 @@
"description": "Defines the flex-wrap style property. It's applied for all screen sizes."
}
},
- "classDescriptions": {
- "container": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "container={true}"
- },
- "direction-xs-column": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"column\""
- },
- "direction-xs-column-reverse": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"column-reverse\""
- },
- "direction-xs-row": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"row\""
- },
- "direction-xs-row-reverse": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"row-reverse\""
- },
- "grid-lg-1": { "description": "" },
- "grid-lg-10": { "description": "" },
- "grid-lg-11": { "description": "" },
- "grid-lg-12": { "description": "" },
- "grid-lg-2": { "description": "" },
- "grid-lg-3": { "description": "" },
- "grid-lg-4": { "description": "" },
- "grid-lg-5": { "description": "" },
- "grid-lg-6": { "description": "" },
- "grid-lg-7": { "description": "" },
- "grid-lg-8": { "description": "" },
- "grid-lg-9": { "description": "" },
- "grid-lg-auto": { "description": "" },
- "grid-lg-true": { "description": "" },
- "grid-md-1": { "description": "" },
- "grid-md-10": { "description": "" },
- "grid-md-11": { "description": "" },
- "grid-md-12": { "description": "" },
- "grid-md-2": { "description": "" },
- "grid-md-3": { "description": "" },
- "grid-md-4": { "description": "" },
- "grid-md-5": { "description": "" },
- "grid-md-6": { "description": "" },
- "grid-md-7": { "description": "" },
- "grid-md-8": { "description": "" },
- "grid-md-9": { "description": "" },
- "grid-md-auto": { "description": "" },
- "grid-md-true": { "description": "" },
- "grid-sm-1": { "description": "" },
- "grid-sm-10": { "description": "" },
- "grid-sm-11": { "description": "" },
- "grid-sm-12": { "description": "" },
- "grid-sm-2": { "description": "" },
- "grid-sm-3": { "description": "" },
- "grid-sm-4": { "description": "" },
- "grid-sm-5": { "description": "" },
- "grid-sm-6": { "description": "" },
- "grid-sm-7": { "description": "" },
- "grid-sm-8": { "description": "" },
- "grid-sm-9": { "description": "" },
- "grid-sm-auto": { "description": "" },
- "grid-sm-true": { "description": "" },
- "grid-xl-1": { "description": "" },
- "grid-xl-10": { "description": "" },
- "grid-xl-11": { "description": "" },
- "grid-xl-12": { "description": "" },
- "grid-xl-2": { "description": "" },
- "grid-xl-3": { "description": "" },
- "grid-xl-4": { "description": "" },
- "grid-xl-5": { "description": "" },
- "grid-xl-6": { "description": "" },
- "grid-xl-7": { "description": "" },
- "grid-xl-8": { "description": "" },
- "grid-xl-9": { "description": "" },
- "grid-xl-auto": { "description": "" },
- "grid-xl-true": { "description": "" },
- "grid-xs-1": { "description": "" },
- "grid-xs-10": { "description": "" },
- "grid-xs-11": { "description": "" },
- "grid-xs-12": { "description": "" },
- "grid-xs-2": { "description": "" },
- "grid-xs-3": { "description": "" },
- "grid-xs-4": { "description": "" },
- "grid-xs-5": { "description": "" },
- "grid-xs-6": { "description": "" },
- "grid-xs-7": { "description": "" },
- "grid-xs-8": { "description": "" },
- "grid-xs-9": { "description": "" },
- "grid-xs-auto": { "description": "" },
- "grid-xs-true": { "description": "" },
- "root": { "description": "Styles applied to the root element." },
- "spacing-xs-0": { "description": "" },
- "spacing-xs-1": { "description": "" },
- "spacing-xs-10": { "description": "" },
- "spacing-xs-2": { "description": "" },
- "spacing-xs-3": { "description": "" },
- "spacing-xs-4": { "description": "" },
- "spacing-xs-5": { "description": "" },
- "spacing-xs-6": { "description": "" },
- "spacing-xs-7": { "description": "" },
- "spacing-xs-8": { "description": "" },
- "spacing-xs-9": { "description": "" },
- "wrap-xs-nowrap": { "description": "" },
- "wrap-xs-wrap": { "description": "" },
- "wrap-xs-wrap-reverse": { "description": "" }
- }
+ "classDescriptions": {}
}
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
index 1d2841bafa74c1..d3d2a873bb52a7 100644
--- a/packages/mui-material/src/Grid2/Grid2.tsx
+++ b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -7,6 +7,8 @@ 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 e0a7b5b2825f3d..1b530ed7f33680 100644
--- a/packages/mui-material/src/Grid2/grid2Classes.ts
+++ b/packages/mui-material/src/Grid2/grid2Classes.ts
@@ -1,40 +1,19 @@
+import { GridClasses } from '@mui/system/Grid';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
-const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
-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;
-
-export type Grid2DynamicClasses = {
- [key in
- | `spacing-xs-${(typeof SPACINGS)[number]}`
- | `wrap-xs-${(typeof WRAPS)[number]}`
- | `grid-${'xs' | 'sm' | 'md' | 'lg' | 'xl'}-${(typeof GRID_SIZES)[number]}`]: string;
-};
-
-export interface Grid2Classes extends Grid2DynamicClasses {
- /** Styles applied to the root element. */
- root: string;
- /** Styles applied to the root element if `container={true}`. */
- container: string;
- /** Styles applied to the root element if `direction="column"`. */
- 'direction-xs-column': string;
- /** Styles applied to the root element if `direction="column-reverse"`. */
- 'direction-xs-column-reverse': string;
- /** Styles applied to the root element if `direction="row-reverse"`. */
- 'direction-xs-row-reverse': string;
- /** Styles applied to the root element if `direction="row"`. */
- 'direction-xs-row': string;
-}
-
-export type Grid2ClassKey = keyof Grid2Classes;
+export type Grid2ClassKey = keyof GridClasses;
export function getGrid2UtilityClass(slot: string): string {
return generateUtilityClass('MuiGrid2', slot);
}
-const grid2Classes: Grid2Classes = generateUtilityClasses('MuiGrid2', [
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+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', [
'root',
'container',
diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts
index c5013e11fe4024..e9616276ef22fe 100644
--- a/packages/mui-material/src/styles/createTheme.spec.ts
+++ b/packages/mui-material/src/styles/createTheme.spec.ts
@@ -66,28 +66,6 @@ const theme = createTheme();
{
createTheme({
components: {
- MuiGrid2: {
- styleOverrides: {
- root: {
- backgroundColor: 'red',
- },
- container: {
- backgroundColor: 'red',
- },
- 'spacing-xs-0': {
- backgroundColor: 'red',
- },
- 'direction-xs-column': {
- backgroundColor: 'red',
- },
- 'wrap-xs-nowrap': {
- backgroundColor: 'red',
- },
- 'grid-xs-1': {
- backgroundColor: 'red',
- },
- },
- },
MuiPopper: {
styleOverrides: {
root: {
diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts
index 4f5e53a43a28c0..4228da8c3e8f33 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 { Grid2ClassKey } from '../Grid2';
+import { Grid2Slot } 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: Grid2ClassKey;
+ MuiGrid2: Grid2Slot;
MuiIcon: IconClassKey;
MuiIconButton: IconButtonClassKey;
MuiImageList: ImageListClassKey;