[DataGrid] Make colors customizable

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 & pinned sections
+
+The Data Grid will use by default the MUI `theme.palette.background.default` color for the background of its header and pinned sections, which 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: {
+    DataGrid: {
+      // 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.

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -41,6 +41,15 @@ const columnHeaderStyles = {
   },
 };
 
+declare module '@mui/material' {
+  interface Mixins {
+    DataGrid: {
+      containerBackground?: string;
+      pinnedBackground?: string;
+    };
+  }
+}
+
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
@@ -126,9 +135,9 @@ export const GridRootStyles = styled('div', {
 
   const containerBackground = t.vars
     ? t.vars.palette.background.default
-    : t.palette.background.default;
+    : t.mixins.DataGrid?.containerBackground ?? t.palette.background.default;
 
-  const pinnedBackground = containerBackground;
+  const pinnedBackground = t.mixins.DataGrid?.pinnedBackground ?? containerBackground;
 
   const overlayBackground = t.vars
     ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})`