[DataGrid] Add default background color to grid #16066

KenanYusuf · 2025-01-03T11:44:34Z

Closes #15517

Changelog

Breaking changes

The Data Grid now has a default background color, and its customization has moved from theme.mixins.MuiDataGrid to theme.palette.DataGrid with the following properties:
- bg: Sets the entire grid's background color (new property)
- headerBg: Sets the header background color (previously named containerBackground)
- pinnedBg: Sets pinned rows and columns background color (previously named pinnedBackground)
```
 const theme = createTheme({
-  mixins: {
-    MuiDataGrid: {
-      containerBackground: '#f8fafc',
-      pinnedBackground: '#f1f5f9',
-    },
-  },
+  palette: {
+    DataGrid: {
+      bg: '#f8fafc',
+      headerBg: '#e2e8f0',
+      pinnedBg: '#f1f5f9',
+    },
+  },
 });
```

mui-bot · 2025-01-03T11:49:15Z

Deploy preview: https://deploy-preview-16066--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 6f211d9

KenanYusuf · 2025-01-03T11:52:43Z

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

-  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
+    : (t.mixins.MuiDataGrid?.background ?? t.palette.background.default);
+  const headerBackground = t.mixins.MuiDataGrid?.headerBackground ?? background;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? background;


Currently, containerBackground is applied to column headers and pinned rows. IMO, it makes more sense to use the pinnedBackground color for pinned rows. With this change, containerBackground would only change the color of column headers, hence why I have renamed it to headerBackground.

It would be a second breaking change in addition to adding a background color to the grid.

Any concerns with this change? @mui/xgrid

KenanYusuf · 2025-01-03T11:57:36Z

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

@@ -663,7 +664,7 @@ export const GridRootStyles = styled('div', {
        backgroundColor: pinnedSelectedBackgroundColor,
      },
    },
-    [`& .${c.virtualScrollerContent} .${c.row}`]: {


Ensures that pinned column cells in pinned rows get hover styles too.

Before - Hovering pinned row

After - Hovering pinned row

cherniavskii · 2025-01-03T15:23:00Z

docs/data/data-grid/style/style.md

-      // Headers, and top & bottom fixed rows
-      containerBackground: '#343434',
+      // Container background
+      background: '#fafaf9',


How to handle dark mode here? It would be great to have this included in this demo.

Mentioned here #16066 (comment) and updated the docs

cherniavskii · 2025-01-03T15:35:49Z

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

+  const background = t.vars
    ? t.vars.palette.background.default
-    : (t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default);


Shouldn't t.mixins.MuiDataGrid?.containerBackground be used if provided, regardless of t.vars?

const background = t.mixins.MuiDataGrid?.containerBackground ?? (t.vars ? t.vars.palette.background.default : t.palette.background.default);

Yeah, the priority was wrong, good spot. Fixed e2e9b02

github-actions · 2025-01-10T08:30:46Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

KenanYusuf · 2025-01-24T09:37:33Z

docs/data/data-grid/style/style.md

+      // Pinned rows and columns background
+      pinnedBg: '#f1f5f9',
+      // Column header background
+      headerBg: '#eaeff5',


This is another breaking change to make Data Grid theming consistent with Material UI.

Instead of using the mixins theme property, we add DataGrid to the palette—in addition to being consistent with other component color options, this gives us built-in support for light/dark mode theming with colorSchemes (as shown in the snippet below this).

Material use bg instead of background, so also updated the property names for consistency.

mapache-salvaje · 2025-01-24T16:34:57Z

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

-### CSS classes and styling
+  - `bg`: Sets the entire grid's background color (new property)
+  - `headerBg`: Sets the header background color (previously named `containerBackground`)
+  - `pinnedBg`: Sets pinned rows and columns background color (previously named `pinnedBackground`)


Suggested change

- `pinnedBg`: Sets pinned rows and columns background color (previously named `pinnedBackground`)

- `pinnedBg`: Sets the background color of pinned rows and columns (previously named `pinnedBackground`)

mapache-salvaje · 2025-01-24T16:37:26Z

docs/data/data-grid/style/style.md

@@ -116,26 +116,64 @@ The following demo illustrates how this can be achieved.

 {{"demo": "StripedGrid.js", "bg": "inline"}}

-## Theme header and pinned sections
+## Theme container, header and pinned sections


Oxford comma. 😁 and is "Theme" necessary here? If not I think it's better without, for the sake of keeping the header as short as possible. I'm on the fence about whether or not to pluralize everything so I'll leave that to your judgement.

Suggested change

## Theme container, header and pinned sections

## Containers, headers, and pinned sections

mapache-salvaje · 2025-01-24T16:38:21Z

docs/data/data-grid/style/style.md

-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:
+By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background color of the grid container, the column headers, and the pinned rows and columns.
+
+The various background colors can be overridden with the following configuration:


passive –> active voice

Suggested change

The various background colors can be overridden with the following configuration:

You can override these background colors with the following theme configuration:

mapache-salvaje · 2025-01-24T16:40:37Z

docs/data/data-grid/style/style.md

    },
  },
 });
 ```

+Material UI v6 users can use the `colorSchemes` property to specify different colors for light and dark mode:


might be nice to add h3s for ### Material UI v6 and ### Material UI v5 so users can quickly differentiate between the two samples when skimming

[DataGrid] Add background-color to grid

19ae1b7

KenanYusuf marked this pull request as draft January 3, 2025 11:44

KenanYusuf added breaking change component: data grid This is the name of the generic UI component, not the React module! v8.x design This is about UI or UX design, please involve a designer customization: theme Centered around the theming features labels Jan 3, 2025

ts format

a8c4527

KenanYusuf commented Jan 3, 2025

View reviewed changes

remove duplicate code

abd745e

KenanYusuf commented Jan 3, 2025

View reviewed changes

cherniavskii reviewed Jan 3, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2025

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 15, 2025

KenanYusuf added 5 commits January 17, 2025 16:25

Merge branch 'master' into grid-background-color

3f3f064

fix order of background

e2e9b02

refactor

649ac02

docs

05ca293

Merge branch 'master' into grid-background-color

870f8f8

KenanYusuf commented Jan 24, 2025

View reviewed changes

KenanYusuf added 2 commits January 24, 2025 09:48

update type

84e7251

migration guide

bdffada

KenanYusuf changed the title ~~[DataGrid] Add background-color to grid~~ [DataGrid] Add default background color to grid Jan 24, 2025

KenanYusuf marked this pull request as ready for review January 24, 2025 10:24

lint

6f211d9

KenanYusuf requested a review from a team January 24, 2025 11:13

arminmeh approved these changes Jan 24, 2025

View reviewed changes

KenanYusuf requested a review from mapache-salvaje January 24, 2025 15:14

mapache-salvaje reviewed Jan 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add default background color to grid #16066

[DataGrid] Add default background color to grid #16066

KenanYusuf commented Jan 3, 2025 •

edited

Loading

mui-bot commented Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

cherniavskii Jan 3, 2025

KenanYusuf Jan 24, 2025 •

edited

Loading

cherniavskii Jan 3, 2025

KenanYusuf Jan 21, 2025

github-actions bot commented Jan 10, 2025

KenanYusuf Jan 24, 2025 •

edited

Loading

mapache-salvaje Jan 24, 2025

mapache-salvaje Jan 24, 2025

mapache-salvaje Jan 24, 2025

mapache-salvaje Jan 24, 2025

	- `pinnedBg`: Sets pinned rows and columns background color (previously named `pinnedBackground`)
	- `pinnedBg`: Sets the background color of pinned rows and columns (previously named `pinnedBackground`)

	## Theme container, header and pinned sections
	## Containers, headers, and pinned sections

	The various background colors can be overridden with the following configuration:
	You can override these background colors with the following theme configuration:

[DataGrid] Add default background color to grid #16066

Are you sure you want to change the base?

[DataGrid] Add default background color to grid #16066

Conversation

KenanYusuf commented Jan 3, 2025 • edited Loading

Changelog

Breaking changes

mui-bot commented Jan 3, 2025 • edited Loading

KenanYusuf Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

KenanYusuf Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Before - Hovering pinned row

After - Hovering pinned row

cherniavskii Jan 3, 2025

Choose a reason for hiding this comment

KenanYusuf Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

cherniavskii Jan 3, 2025

Choose a reason for hiding this comment

KenanYusuf Jan 21, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2025

KenanYusuf Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

KenanYusuf commented Jan 3, 2025 •

edited

Loading

mui-bot commented Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 24, 2025 •

edited

Loading

KenanYusuf Jan 24, 2025 •

edited

Loading