[core] Reduce styles complexity

packages/grid/_modules_/grid/components/GridPagination.tsx

@@ -9,7 +9,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector';
 
-const StyledTablePagination = styled(TablePagination)(({ theme }) => ({
+const GridPaginationRoot = styled(TablePagination)(({ theme }) => ({
   [`& .${tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
@@ -74,7 +74,7 @@ export const GridPagination = React.forwardRef<
   }
 
   return (
-    <StyledTablePagination
+    <GridPaginationRoot
       ref={ref}
       // @ts-ignore
       component="div"

packages/grid/_modules_/grid/components/GridRowCount.tsx

@@ -2,6 +2,7 @@ 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 { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -26,6 +27,16 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowCount',
+  overridesResolver: (props, styles) => styles.rowCount,
+})(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2),
+}));
+
 const GridRowCount = React.forwardRef<HTMLDivElement, GridRowCountProps>(function GridRowCount(
   props,
   ref,
@@ -46,9 +57,9 @@ const GridRowCount = React.forwardRef<HTMLDivElement, GridRowCountProps>(functio
       : rowCount.toLocaleString();
 
   return (
-    <div ref={ref} className={clsx(classes.root, className)} {...other}>
+    <GridRowCountRoot ref={ref} className={clsx(classes.root, className)} {...other}>
       {apiRef.current.getLocaleText('footerTotalRows')} {text}
-    </div>
+    </GridRowCountRoot>
   );
 });
 

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/GridSelectedRowCount.tsx

@@ -2,6 +2,7 @@ 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 { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -25,6 +26,24 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridSelectedRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'SelectedRowCount',
+  overridesResolver: (props, styles) => styles.selectedRowCount,
+})(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2),
+  visibility: 'hidden',
+  width: 0,
+  height: 0,
+  [theme.breakpoints.up('sm')]: {
+    visibility: 'visible',
+    width: 'auto',
+    height: 'auto',
+  },
+}));
+
 const GridSelectedRowCount = React.forwardRef<HTMLDivElement, GridSelectedRowCountProps>(
   function GridSelectedRowCount(props, ref) {
     const { className, selectedRowCount, ...other } = props;
@@ -35,9 +54,9 @@ const GridSelectedRowCount = React.forwardRef<HTMLDivElement, GridSelectedRowCou
     const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
 
     return (
-      <div ref={ref} className={clsx(classes.root, className)} {...other}>
+      <GridSelectedRowCountRoot ref={ref} className={clsx(classes.root, className)} {...other}>
         {rowSelectedText}
-      </div>
+      </GridSelectedRowCountRoot>
     );
   },
 );

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
 import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
 import { getDataGridUtilityClass } from '../../gridClasses';
@@ -20,6 +21,19 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridEditInputCellRoot = styled(InputBase, {
+  name: 'MuiDataGrid',
+  slot: 'EditInputCell',
+  overridesResolver: (props, styles) => styles.editInputCell,
+})(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: '1px 0',
+  '& input': {
+    padding: '0 16px',
+    height: '100%',
+  },
+}));
+
 function GridEditInputCell(props: GridRenderEditCellParams & InputBaseProps) {
   const {
     id,
@@ -63,7 +77,7 @@ function GridEditInputCell(props: GridRenderEditCellParams & InputBaseProps) {
   }, [hasFocus]);
 
   return (
-    <InputBase
+    <GridEditInputCellRoot
       inputRef={inputRef}
       className={classes.root}
       fullWidth

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/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>
   );
 }
 

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

@@ -2,6 +2,7 @@ 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 Tooltip from '@mui/material/Tooltip';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../gridClasses';
@@ -20,6 +21,17 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridColumnHeaderTitleRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderTitle',
+  overridesResolver: (props, styles) => styles.columnHeaderTitle,
+})(({ theme }) => ({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: theme.typography.fontWeightMedium,
+}));
+
 const ColumnHeaderInnerTitle = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
@@ -29,7 +41,9 @@ const ColumnHeaderInnerTitle = React.forwardRef<
   const ownerState = { classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
 
-  return <div ref={ref} className={clsx(classes.root, className)} {...other} />;
+  return (
+    <GridColumnHeaderTitleRoot ref={ref} className={clsx(classes.root, className)} {...other} />
+  );
 });
 
 export interface GridColumnHeaderTitleProps {

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import {
   visibleGridColumnsSelector,
   gridColumnsMetaSelector,
@@ -10,7 +11,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { unstable_gridScrollBarSizeSelector } from '../../hooks/features/container/gridContainerSizesSelector';
-import { getDataGridUtilityClass } from '../../gridClasses';
+import { getDataGridUtilityClass, gridClasses } from '../../gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridComponentProps } from '../../GridComponentProps';
 import { useGridApiEventHandler } from '../../hooks/utils/useGridApiEventHandler';
@@ -42,6 +43,27 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
+const GridColumnsHeaderRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderWrapper',
+  overridesResolver: (props, styles) => [
+    { [`&.${gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone },
+    styles.columnHeaderWrapper,
+  ],
+})(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
+    cursor: 'move',
+  },
+  [`&.scroll .${gridClasses.columnHeader}:last-child`]: {
+    borderRight: 'none',
+  },
+  [`& .${gridClasses.cell}`]: {
+    borderBottom: 'none',
+  },
+}));
+
 export const GridColumnsHeader = React.forwardRef<HTMLDivElement, any>(function GridColumnsHeader(
   props,
   ref,
@@ -193,13 +215,13 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, any>(function
   };
 
   return (
-    <div
+    <GridColumnsHeaderRoot
       ref={handleRef}
       className={clsx(classes.wrapper, scrollBarState.hasScrollX && 'scroll')}
       aria-rowindex={1}
       role="row"
     >
       {getColumns()}
-    </div>
+    </GridColumnsHeaderRoot>
   );
 });