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;