[DataGrid] refactor: theme to CSS variables

docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js

@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>

docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx

@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')!}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

@@ -98,6 +98,7 @@ Below are described the steps you need to make to migrate from v7 to v8.
 ### Other exports
 
 - `ariaV8` experimental flag is removed. It's now the default behavior.
+- Sub-components that are in a React Portal must now be wrapped with `GridPortalWrapper`
 
 <!-- ### Editing
 

packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx

@@ -8,7 +8,7 @@ import {
   GridColumnHeaderParams,
   GridColumnHeaderTitle,
 } from '@mui/x-data-grid';
-import type { GridBaseColDef } from '@mui/x-data-grid/internals';
+import { vars, type GridBaseColDef } from '@mui/x-data-grid/internals';
 import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -37,14 +37,11 @@ const GridAggregationHeaderRoot = styled('div', {
 const GridAggregationFunctionLabel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'AggregationColumnHeaderLabel',
-  overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel,
-})<{ ownerState: OwnerState }>(({ theme }) => {
-  return {
-    fontSize: theme.typography.caption.fontSize,
-    lineHeight: 'normal',
-    color: theme.palette.text.secondary,
-    marginTop: -1,
-  };
+})<{ ownerState: OwnerState }>({
+  fontSize: vars.typography.small.fontSize,
+  lineHeight: 'normal',
+  color: vars.colors.foreground.muted,
+  marginTop: -1,
 });
 
 const useUtilityClasses = (ownerState: OwnerState) => {

packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
-import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { vars, useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import {
   useGridSelector,
   getDataGridUtilityClass,
@@ -124,8 +124,7 @@ export function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCe
         ml:
           rootProps.rowGroupingColumnMode === 'multiple'
             ? 0
-            : (theme) =>
-                `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`,
+            : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`,
       }}
     >
       <div className={classes.toggle}>

packages/x-data-grid-premium/src/components/GridFooterCell.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { getDataGridUtilityClass, GridRenderCellParams } from '@mui/x-data-grid';
+import { vars } from '@mui/x-data-grid/internals';
 import { styled, Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
@@ -10,10 +11,10 @@ const GridFooterCellRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell',
   overridesResolver: (_, styles) => styles.footerCell,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
-  fontWeight: theme.typography.fontWeightMedium,
-  color: (theme.vars || theme).palette.primary.dark,
-}));
+})<{ ownerState: OwnerState }>({
+  fontWeight: vars.typography.fontWeight.medium,
+  color: vars.colors.foreground.accent,
+});
 
 interface GridFooterCellProps extends GridRenderCellParams {
   sx?: SxProps<Theme>;

packages/x-data-grid-premium/src/components/GridGroupingColumnFooterCell.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { vars } from '@mui/x-data-grid/internals';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { SxProps, Theme } from '@mui/system';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -13,8 +14,7 @@ function GridGroupingColumnFooterCell(props: GridRenderCellParams) {
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
     sx.ml = 2;
   } else {
-    sx.ml = (theme) =>
-      `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
+    sx.ml = `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(props.rowNode.depth)})`;
   }
 
   return <GridFooterCell sx={sx} {...props} />;

packages/x-data-grid-premium/src/components/GridGroupingColumnLeafCell.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import { vars } from '@mui/x-data-grid/internals';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
@@ -14,9 +15,9 @@ function GridGroupingColumnLeafCell(props: GridRenderCellParams) {
           ? {
               ml: 1,
             }
-          : (theme) => ({
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
-            }),
+          : {
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
+            },
       ]}
       style={{ '--depth': rowNode.depth } as any}
     >

packages/x-data-grid-premium/src/components/GridGroupingCriteriaCell.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
+import { vars } from '@mui/x-data-grid/internals';
 import {
   useGridSelector,
   gridFilteredDescendantCountLookupSelector,
@@ -80,9 +81,9 @@ export function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps) {
           ? {
               ml: 0,
             }
-          : (theme) => ({
-              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`,
-            }),
+          : {
+              ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${vars.spacing(1)})`,
+            },
       ]}
       style={{ '--depth': rowNode.depth } as any}
     >

packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars, GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 
 const Filler = styled('div')({
   flex: 1,
-  backgroundColor: 'var(--DataGrid-containerBackground)',
+  backgroundColor: vars.colors.background.base,
 });
 
 export interface GridColumnHeadersProps

packages/x-data-grid-pro/src/components/GridDetailPanel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { GridRowId } from '@mui/x-data-grid';
+import { vars } from '@mui/x-data-grid/internals';
 import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -12,12 +13,12 @@ const DetailPanel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
   overridesResolver: (props, styles) => styles.detailPanel,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   width:
     'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  backgroundColor: (theme.vars || theme).palette.background.default,
+  backgroundColor: vars.colors.background.base,
   overflow: 'auto',
-}));
+});
 
 interface GridDetailPanelProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {

packages/x-data-grid/src/components/GridPagination.tsx

@@ -7,6 +7,7 @@ import TablePagination, {
   LabelDisplayedRowsArgs,
 } from '@mui/material/TablePagination';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from '../constants/cssVariables';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -16,22 +17,22 @@ import {
   gridPageCountSelector,
 } from '../hooks/features/pagination/gridPaginationSelector';
 
-const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({
+const GridPaginationRoot = styled(TablePagination)({
   maxHeight: 'calc(100% + 1px)', // border width
   flexGrow: 1,
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
-    [theme.breakpoints.up('sm')]: {
+    [vars.breakpoints.up('sm')]: {
       display: 'block',
     },
   },
   [`& .${tablePaginationClasses.input}`]: {
     display: 'none',
-    [theme.breakpoints.up('sm')]: {
+    [vars.breakpoints.up('sm')]: {
       display: 'inline-flex',
     },
   },
-})) as typeof TablePagination;
+}) as typeof TablePagination;
 
 export type WrappedLabelDisplayedRows = (
   args: LabelDisplayedRowsArgs & { estimated?: number },

packages/x-data-grid/src/components/GridRowCount.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, SxProps, Theme } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from '../constants/cssVariables';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -35,11 +36,11 @@ const GridRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'RowCount',
   overridesResolver: (props, styles) => styles.rowCount,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2),
-}));
+  margin: vars.spacing(0, 2),
+});
 
 const GridRowCount = forwardRef<HTMLDivElement, GridRowCountProps>(
   function GridRowCount(props, ref) {

packages/x-data-grid/src/components/GridSelectedRowCount.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, SxProps, Theme } from '@mui/system';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from '../constants/cssVariables';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -34,19 +35,19 @@ const GridSelectedRowCountRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'SelectedRowCount',
   overridesResolver: (props, styles) => styles.selectedRowCount,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
   alignItems: 'center',
   display: 'flex',
-  margin: theme.spacing(0, 2),
+  margin: vars.spacing(0, 2),
   visibility: 'hidden',
   width: 0,
   height: 0,
-  [theme.breakpoints.up('sm')]: {
+  [vars.breakpoints.up('sm')]: {
     visibility: 'visible',
     width: 'auto',
     height: 'auto',
   },
-}));
+});
 
 const GridSelectedRowCount = forwardRef<HTMLDivElement, GridSelectedRowCountProps>(
   function GridSelectedRowCount(props, ref) {

packages/x-data-grid/src/components/cell/GridEditInputCell.tsx

@@ -7,6 +7,7 @@ import {
 import { styled } from '@mui/material/styles';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { vars } from '../../constants/cssVariables';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -28,15 +29,14 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 const GridEditInputCellRoot = styled(InputBase, {
   name: 'MuiDataGrid',
   slot: 'EditInputCell',
-  overridesResolver: (props, styles) => styles.editInputCell,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
-  ...theme.typography.body2,
+})<{ ownerState: OwnerState }>({
+  ...vars.typography.body,
   padding: '1px 0',
   '& input': {
     padding: '0 16px',
     height: '100%',
   },
-}));
+});
 
 export interface GridEditInputCellProps
   extends GridRenderEditCellParams,