[DataGrid] Make colors customizable (#12614)

Signed-off-by: Rom Grk <romgrk@users.noreply.github.com> Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
mui · Apr 11, 2024 · 873d964 · 873d964
1 parent 3a5c363
commit 873d964
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md
@@ -116,6 +116,25 @@ The following demo illustrates how this can be achieved.
 
 {{"demo": "StripedGrid.js", "bg": "inline"}}
 
+## Theme header and pinned sections
+
+By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background of its header and pinned sections. These elements require a solid color to hide the scrollable content behind them. You can override that color with the following configuration:
+
+```tsx
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  mixins: {
+    MuiDataGrid: {
+      // Pinned columns sections
+      pinnedBackground: '#340606',
+      // Headers, and top & bottom fixed rows
+      containerBackground: '#343434',
+    },
+  },
+});
+```
+
 ## Custom theme
 
 The following demo leverages the CSS customization API to match the Ant Design specification.

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -8,6 +8,7 @@ import {
   recomposeColor,
   Theme,
 } from '@mui/material/styles';
+import type {} from '../../themeAugmentation/overrides';
 import { gridClasses as c } from '../../constants/gridClasses';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
@@ -126,9 +127,9 @@ export const GridRootStyles = styled('div', {
 
   const containerBackground = t.vars
     ? t.vars.palette.background.default
-    : t.palette.background.default;
+    : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
 
-  const pinnedBackground = containerBackground;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
 
   const overlayBackground = t.vars
     ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})`

diff --git a/packages/x-data-grid/src/themeAugmentation/overrides.ts b/packages/x-data-grid/src/themeAugmentation/overrides.ts
@@ -6,4 +6,11 @@ export interface DataGridComponentNameToClassKey {
 
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends DataGridComponentNameToClassKey {}
+
+  interface Mixins {
+    MuiDataGrid?: {
+      containerBackground?: string;
+      pinnedBackground?: string;
+    };
+  }
 }