[data grid] Grid has inconsistent background

[Janpot]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/column-pinning/#initializing-the-pinned-columns

Steps:

1. Open demo
2. Expand the code
3. Edit the container div to be <div style={{ height: 400, width: '100%', background:'red' }}>

Current behavior

Some parts of the grid are transparent, others have a background.

Expected behavior

Either the whole grid has a background, or it's completely transparent.

Context

It's clear we use a background to position a sticky header and pinned columns over the grid. Assuming it's a big refactor to make all surfaces transparent, perhaps it makes sense to set a background for the whole grid as well?

I'm sure this issue must have been recorded already, but I couldn't find it.

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: background

[romgrk]

Not possible, you can find some details here: https://mui.com/blog/mui-x-v7/#sticky-headers-and-improved-scrolling-performance

And how to customize the colors here: https://mui.com/x/react-data-grid/style/#theme-header-and-pinned-sections

I'm not sure about setting an explicit background color. It could make sense, but I'd rather wait to have actual cases from users where it's needed before doing the change? Because I guess adding a solid background now could also be a breaking change in some cases.

[Janpot]

I think the common problem I've ran into several times was when my app used a dark theme and I've forgotten the <CssBaseline /> component. e.g. as in https://stackblitz.com/edit/react-rbpzvo?file=index.tsx Granted, the root cause is that one needs to set up the <CssBaseline /> correctly. But the grid could do a better effort at a good default behavior regardless and show something. Now it just looks completely broken, it feels a bit brittle to let the correct rendering of the grid depend completely on whether users use <CssBaseline />. As another data point, someone came to our booth at React summit last week and showed me their application, one of the first things I noticed was that they were missing <CssBaseline /> . I believe this is also what happened initially to the grid AI prototype?

Technically this could be seen as a breaking change, we could do it on the next major?

[michelengelen]

IMO this basically falls into the area of making it design agnostic. We could use CSS variables here:

--MuiDataGrid-gridDefaultBackground: ...
--MuiDataGrid-gridDefaultBackground--hover: ...
--MuiDataGrid-gridDefaultBackground--active: ...
--MuiDataGrid-gridPinnedBackground: var(--MuiDataGrid-gridDefaultBackground)
...

WDYTR @romgrk ?