[data grid] DataGrid style when in dark mode and inside a dialog

[mauro-ni]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/blue-fog-zknyzh
2. Set theme to dark
3. Open the dialog

Current behavior

As you can see, inside the dialog there is a DataGrid. The color of rows / cells borders is wrong.
In light mode everything is fine. Header background is too much dark.

Expected behavior

Borders should be visibile (ther should be more contrast with the background).
Also, background of header and pinned columns should match the dialog background.

Context

The context is DataGrid in dialogs.
I'm using css vars and set default & paper background to #303030

Your environment

I'm using Google Chrome.

npx @mui/envinfo

  System:
    OS: macOS 15.1.1
  Binaries:
    Node: 23.2.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.71
    Edge: Not Found
    Safari: 18.1.1
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.7 
    @mui/icons-material: ^6.1.7 => 6.1.7 
    @mui/lab: 6.0.0-beta.15 => 6.0.0-beta.15 
    @mui/material: ^6.1.7 => 6.1.7 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system: ^6.1.7 => 6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.3 
    @mui/x-data-grid:  7.22.2 
    @mui/x-data-grid-premium: ^7.22.2 => 7.22.2 
    @mui/x-data-grid-pro:  7.22.2 
    @mui/x-date-pickers:  7.22.2 
    @mui/x-date-pickers-pro: ^7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @types/react:  18.0.10 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript:  5.1.6 

Search keywords: datagrid dark dialog
Order ID: 97630

[michelengelen]

We can do better with allowing for a better theming experience, I do agree.
For now we kind of only apply one thing, which is the pinned container background since those need to have a solid color to allow for elements below that (z-index lower) to not bleed through.
All other elements are basically transparent and only the text color changes.
You can customize the grid with styleOverrides though:

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: "class",
  },
  colorSchemes: { light: true, dark: true },
  palette: {
    mode: "dark", // Use dark mode
    background: {
      default: "#303030",
      paper: "#303030",
    },
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        row: {
          backgroundColor: "#222",
        },
      },
    },
  },
});

I am not sure how far in we are with the design agnostic approach ... @romgrk know best about that and could elaborate on that a bit.

Would that mentioned workaround be useful for you for the moment @mauro-ni?

[mauro-ni]

@michelengelen many thanks for you reply.

As you said, currently DataGrid set a background to pinned container and header.
The customization you provide doesn't take into account the footer and the space left in the body (when rows don't fill the DataGrid body).

In my projects I already added theme customization in order to get striped rows that also work with pinned columns (even if I don't like to repeat it on every project).

As far as I am concerned, from DX point of view, it would be better to have such features implemented by the library and activate them through DataGrid boolean props (eg. striped, inPaper). Probably the second property I suggest (inPaper) could be superfluous, if a different style for grids inside dialogs/papers can be provided.
What do you think?

Many thanks.

Mauro

[michelengelen]

I am not sure how the team feels about adding more props that can be easily done with a line of CSS. There is a new issue opened by @KenanYusuf about adding background color to the grid in general to allow for easier theming of that: #15517

The striped rows with pinned columns is a bit weird, I get that. But this is on our radar already to be improved. There is an ongoing effort to allow for a design-agnostic grid that probably includes a lot of those small improvements as well.

[mauro-ni]

@michelengelen I agree.

The best solution is definitely to avoid new properties and have the grid background set automatically, depending on the context (dialog / page).

As for striped rows, I can't wait for these improvements to make it into a new release.

Many thanks.

[michelengelen]

I'll close this one in favor of #15517 👍🏼

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mauro-ni How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.