[core] Reduce styles complexity

packages/grid/_modules_/grid/components/GridScrollArea.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { GridEvents } from '../constants/eventsConstants';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { GridScrollParams } from '../models/params/gridScrollParams';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../gridClasses';
+import { getDataGridUtilityClass, gridClasses } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../GridComponentProps';
 import { gridDensityHeaderHeightSelector } from '../hooks/features/density/densitySelector';
@@ -32,6 +34,28 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [
+    { [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left'] },
+    { [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right'] },
+    styles.scrollArea,
+  ],
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${gridClasses['scrollArea--left']}`]: {
+    left: 0,
+  },
+  [`&.${gridClasses['scrollArea--right']}`]: {
+    right: 0,
+  },
+}));
+
 function GridScrollAreaRaw(props: ScrollAreaProps) {
   const { scrollDirection } = props;
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -93,7 +117,12 @@ function GridScrollAreaRaw(props: ScrollAreaProps) {
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, toggleDragging);
 
   return dragging ? (
-    <div ref={rootRef} className={classes.root} onDragOver={handleDragOver} style={{ height }} />
+    <GridScrollAreaRawRoot
+      ref={rootRef}
+      className={clsx(classes.root)}
+      onDragOver={handleDragOver}
+      style={{ height }}
+    />
   ) : null;
 }
 

packages/grid/_modules_/grid/components/cell/GridCell.tsx

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { ownerDocument, capitalize } from '@mui/material/utils';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import { GridEvents } from '../../constants/eventsConstants';
-import { getDataGridUtilityClass } from '../../gridClasses';
+import { getDataGridUtilityClass, gridClasses } from '../../gridClasses';
 import {
   GridAlignment,
   GridCellMode,
@@ -76,6 +77,82 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Cell',
+  overridesResolver: (props, styles) => [
+    { [`&.${gridClasses['cell--editing']}`]: styles['cell--editing'] },
+    { [`&.${gridClasses['cell--textCenter']}`]: styles['cell--textCenter'] },
+    { [`&.${gridClasses['cell--textLeft']}`]: styles['cell--textLeft'] },
+    { [`&.${gridClasses['cell--textRight']}`]: styles['cell--textRight'] },
+    { [`&.${gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer'] },
+    { [`&.${gridClasses.withBorder}`]: styles.withBorder },
+    styles.cell,
+  ],
+})(({ theme }) => {
+  const borderColor =
+    theme.palette.mode === 'light'
+      ? lighten(alpha(theme.palette.divider, 1), 0.88)
+      : darken(alpha(theme.palette.divider, 1), 0.68);
+
+  return {
+    WebkitTapHighlightColor: 'transparent',
+    padding: '0 10px',
+    boxSizing: 'border-box',
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    borderBottom: `1px solid ${borderColor}`,
+    [`&:focus-within`]: {
+      outline: `solid ${alpha(theme.palette.primary.main, 0.5)} 1px`,
+      outlineWidth: 1,
+      outlineOffset: -1,
+    },
+    [`&:focus`]: {
+      outline: `solid ${theme.palette.primary.main} 1px`,
+    },
+    [`&.${gridClasses['cell--editing']}`]: {
+      padding: 1,
+      display: 'flex',
+      boxShadow: theme.shadows[2],
+      backgroundColor: theme.palette.background.paper,
+      '&:focus-within': {
+        outline: `solid ${theme.palette.primary.main} 1px`,
+        outlineOffset: '-1px',
+      },
+    },
+    [`&.${gridClasses.withBorder}`]: {
+      borderRight: `1px solid ${borderColor}`,
+    },
+    [`&.${gridClasses['cell--withRenderer']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+    [`&.${gridClasses['cell--textLeft']}`]: {
+      textAlign: 'left',
+    },
+    [`&.${gridClasses['cell--textLeft']}.${gridClasses['cell--withRenderer']}, &.${gridClasses['cell--textLeft']}.${gridClasses['cell--editing']}`]:
+      {
+        justifyContent: 'flex-start',
+      },
+    [`&.${gridClasses['cell--textRight']}`]: {
+      textAlign: 'right',
+    },
+    [`&.${gridClasses['cell--textRight']}.${gridClasses['cell--withRenderer']}, &.${gridClasses['cell--textRight']}.${gridClasses['cell--editing']}`]:
+      {
+        justifyContent: 'flex-end',
+      },
+    [`&.${gridClasses['cell--textCenter']}`]: {
+      textAlign: 'center',
+    },
+    [`&.${gridClasses['cell--textCenter']}.${gridClasses['cell--withRenderer']}, &.${gridClasses['cell--textCenter']}.${gridClasses['cell--editing']}`]:
+      {
+        justifyContent: 'center',
+      },
+  };
+});
+
 function GridCell(props: GridCellProps) {
   const {
     align,
@@ -182,7 +259,7 @@ function GridCell(props: GridCellProps) {
   });
 
   return (
-    <div
+    <GridCellRoot
       ref={cellRef}
       className={clsx(className, classes.root)}
       role="cell"
@@ -201,7 +278,7 @@ function GridCell(props: GridCellProps) {
       {...other}
     >
       {children != null ? children : valueToRender?.toString()}
-    </div>
+    </GridCellRoot>
   );
 }
 

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx

@@ -9,6 +9,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
 
 export interface ColumnHeaderFilterIconProps {
   counter?: number;
@@ -22,7 +23,6 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    container: ['iconButtonContainer'],
     icon: ['filterIcon'],
   };
 
@@ -77,14 +77,14 @@ export function ColumnHeaderFilterIcon(props: ColumnHeaderFilterIconProps) {
       }
       enterDelay={1000}
     >
-      <div className={classes.container}>
+      <GridIconButtonContainer>
         {counter > 1 && (
           <Badge badgeContent={counter} color="default">
             {iconButton}
           </Badge>
         )}
         {counter === 1 && iconButton}
-      </div>
+      </GridIconButtonContainer>
     </Tooltip>
   );
 }

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
+import { alpha, darken, lighten, styled } from '@mui/material/styles';
 import { GridEvents } from '../../constants/eventsConstants';
 import { GridStateColDef } from '../../models/colDef/index';
 import { GridSortDirection } from '../../models/gridSortModel';
@@ -13,7 +14,7 @@ import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { ColumnHeaderFilterIcon } from './ColumnHeaderFilterIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { getDataGridUtilityClass } from '../../gridClasses';
+import { getDataGridUtilityClass, gridClasses } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 
@@ -66,6 +67,110 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridColumnHeaderItemRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeader',
+  overridesResolver: (props, styles) => [
+    { [`&.${gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter'] },
+    { [`&.${gridClasses['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft'] },
+    { [`&.${gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight'] },
+    { [`&.${gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging'] },
+    { [`&.${gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving'] },
+    { [`&.${gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric'] },
+    { [`&.${gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable'] },
+    { [`&.${gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted'] },
+    { [`&.${gridClasses.withBorder}`]: styles.withBorder },
+    { [`& .${gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer },
+    { [`& .${gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer },
+    styles.columnHeader,
+  ],
+})(({ theme }) => {
+  const borderColor =
+    theme.palette.mode === 'light'
+      ? lighten(alpha(theme.palette.divider, 1), 0.88)
+      : darken(alpha(theme.palette.divider, 1), 0.68);
+
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    WebkitTapHighlightColor: 'transparent',
+    padding: '0 10px',
+    boxSizing: 'border-box',
+    [`&:hover`]: {
+      [`& .${gridClasses.iconButtonContainer}`]: {
+        visibility: 'visible',
+        width: 'auto',
+      },
+      [`& .${gridClasses.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible',
+      },
+    },
+    [`&:focus-within`]: {
+      outline: `solid ${alpha(theme.palette.primary.main, 0.5)} 1px`,
+      outlineWidth: 1,
+      outlineOffset: -1,
+    },
+    [`&:focus`]: {
+      outline: `solid ${theme.palette.primary.main} 1px`,
+    },
+    [`&.${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}`]: {
+      visibility: 'visible',
+      width: 'auto',
+    },
+    [`&:not(.${gridClasses['columnHeader--sorted']}) .${gridClasses.sortIcon}`]: {
+      opacity: 0,
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.shorter,
+      }),
+    },
+    [`&:not(.${gridClasses['columnHeader--sorted']}):hover .${gridClasses.sortIcon}`]: {
+      opacity: 0.5,
+    },
+    [`&.${gridClasses['columnHeader--sortable']}`]: {
+      cursor: 'pointer',
+    },
+    [`&.${gridClasses['columnHeader--alignCenter']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      justifyContent: 'center',
+    },
+    [`&.${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderDraggableContainer}, &.${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderTitleContainer}`]:
+      {
+        flexDirection: 'row-reverse',
+      },
+    [`&.${gridClasses['columnHeader--alignCenter']} .${gridClasses.menuIcon}, &.${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}`]:
+      {
+        marginRight: 'auto',
+        marginLeft: -6,
+      },
+    [`& .${gridClasses['columnHeader--moving']}`]: {
+      backgroundColor: theme.palette.action.hover,
+    },
+    [`& .${gridClasses.columnHeaderTitleContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flex: 1,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      padding: '0 6px',
+    },
+    [`& .${gridClasses.columnHeaderDraggableContainer}`]: {
+      display: 'flex',
+      width: '100%',
+    },
+    [`& .${gridClasses['columnHeader--dragging']}`]: {
+      background: theme.palette.background.paper,
+      padding: '0 12px',
+      borderRadius: theme.shape.borderRadius,
+      opacity: theme.palette.action.disabledOpacity,
+    },
+    [`&.${gridClasses.withBorder}`]: {
+      borderRight: `1px solid ${borderColor}`,
+    },
+  };
+});
+
 function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   const {
     column,
@@ -181,7 +286,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
       : column.headerClassName;
 
   return (
-    <div
+    <GridColumnHeaderItemRoot
       ref={headerCellRef}
       className={clsx(classes.root, headerClassName)}
       data-field={column.field}
@@ -229,7 +334,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
         ContentComponent={rootProps.components.ColumnMenu}
         contentComponentProps={rootProps.componentsProps?.columnMenu}
       />
-    </div>
+    </GridColumnHeaderItemRoot>
   );
 }
 

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderSortIcon.tsx

@@ -9,6 +9,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
 
 export interface GridColumnHeaderSortIconProps {
   direction: GridSortDirection;
@@ -23,7 +24,6 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    root: ['iconButtonContainer'],
     icon: ['sortIcon'],
   };
 
@@ -64,15 +64,15 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) {
   );
 
   return (
-    <div className={classes.root}>
+    <GridIconButtonContainer>
       {index != null && (
         <Badge badgeContent={index} color="default">
           {iconButton}
         </Badge>
       )}
 
       {index == null && iconButton}
-    </div>
+    </GridIconButtonContainer>
   );
 }