[data grid] Dark mode DataGridPro Pinning

[funnyjk]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. the following theme is enough for the datagridpro to display wrong.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';
import { ThemeProvider, createTheme } from "@mui/material/styles";

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});
ReactDOM.createRoot(document.querySelector("#root")!).render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>

    <StyledEngineProvider injectFirst>
      <Demo />
    </StyledEngineProvider>
    </ThemeProvider>
  </React.StrictMode>
);

Current behavior

the dark mode messes up the theming for the datagridpro

Expected behavior

the dark mode should work for the datagridpro

Context

The dark mode worked perfectly for the regular datagrid. not the datagridpro

Your environment

npx @mui/envinfo

FireFox was used

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (129.0.2792.65)
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.7
@mui/icons-material: ^6.1.7 => 6.1.7
@mui/material: ^6.1.6 => 6.1.7
@mui/private-theming: 6.1.7
@mui/styled-engine: 6.1.7
@mui/styled-engine-sc: ^6.1.7 => 6.1.7
@mui/system: 6.1.7
@mui/types: 7.2.19
@mui/utils: 6.1.7
@mui/x-data-grid: ^7.22.2 => 7.22.2
@mui/x-data-grid-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.3.12 => 18.3.12
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: ^6.1.13 => 6.1.13
typescript: ~5.6.2 => 5.6.3

Search keywords: dark mode pinning data grid
Order ID: 102029

[michelengelen]

Hey @funnyjk ... I do agree that we could be a bit better at supporting themes OOTB, but for this specific use case there is a very easy workaround. Since the rows are all transparent and the effect colors are opaque you can just use a background on the wrapping div element:

<ThemeProvider theme={darkTheme}>
  <div style={{ height: 400, width: '100%', backgroundColor: '#1c1c1c' }}>
    <DataGridPremium
      apiRef={apiRef}
      columns={columns}
      rows={rows}
      slots={{
        toolbar: GridToolbar,
      }}
      slotProps={{
        columnsManagement: {
          getTogglableColumns,
        },
      }}
    />
  </div>
</ThemeProvider>

It will then look something like this:

Would that suit your use case?

[KenanYusuf]

In your example, you need to include the CssBaseline to ensure the background color is being set correctly on the body:

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { StyledEngineProvider } from "@mui/material/styles";
import Demo from "./Demo";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
});
ReactDOM.createRoot(document.querySelector("#root")!).render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <StyledEngineProvider injectFirst>
        <CssBaseline />
        <Demo />
      </StyledEngineProvider>
    </ThemeProvider>
  </React.StrictMode>
);

[funnyjk]

I included the CssBaseline already, but the background fix does not work for the pinned columns.

[funnyjk]

[funnyjk]

the css variable is also being set with !important but it is not honoring it.

const darkTheme = createTheme({
  palette: {
    mode: "dark",
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
          ["--DataGrid-pinnedBackground"]: "#123456 !important",
          ["--DataGrid-containerBackground"]: "#123456 !important",
        },
      },
    },
  },
});

[michelengelen]

It works for me if I use the code you provided:

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
          ['--DataGrid-pinnedBackground']: '#123456',
          ['--DataGrid-containerBackground']: '#123456',
        },
      },
    },
  },
});

const columns: GridColDef<(typeof rows)[number]>[] = [...];

const rows = [...];

export default function DataGridDemo() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Box sx={{ height: 400, width: '100%' }}>
        <DataGridPro rows={rows} columns={columns} />
      </Box>
    </ThemeProvider>
  );
}