Finesse the Material UI DataGrid CSS - DAV-1000/react-material GitHub Wiki

Created: 8/6/2025 14:47
Updated: 8/14/2025 14:15
Exported: 8/14/2025 14:15
Link: https://chatgpt.com/c/68935c90-1174-832d-a088-9ff2e658afd1

Prompt:

I have implemented the Material UI Community DataGrid in my Typescript React app. The app have a Light/Dark color mode option. When color mode is light, all the borders of my grid are also light and therefore invisible. When the mode is dark, the borders are also dak. How can I reverse this

Response:

Got it! You want the DataGrid borders to be dark in light mode and light in dark mode, essentially the opposite of the current behavior.

Here’s how you can do that with Material UI’s DataGrid in a React + TypeScript app that supports light/dark modes:

Approach

You need to customize the DataGrid’s CSS or theme overrides depending on the color mode. You can do this by:

Accessing the current theme mode (light or dark) using Material UI's useTheme() hook.
Applying custom CSS styles to the DataGrid’s border color based on the mode.

Example

import { DataGrid } from '@mui/x-data-grid';
import { useTheme } from '@mui/material/styles';

const MyDataGridComponent = () => {
  const theme = useTheme();
  const isLight = theme.palette.mode === 'light';

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={/* your rows */}
        columns={/* your columns */}
        sx={{
          borderColor: isLight ? theme.palette.grey[900] : theme.palette.grey[100],
          '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeaders, & .MuiDataGrid-footerContainer': {
            borderColor: isLight ? theme.palette.grey[900] : theme.palette.grey[100],
          },
          '& .MuiDataGrid-columnSeparator': {
            color: isLight ? theme.palette.grey[900] : theme.palette.grey[100],
          },
        }}
      />
    </div>
  );
};

Explanation

theme.palette.mode tells if the current mode is light or dark.
When light mode is active, border color is set to a dark grey (grey[900]).
When dark mode is active, border color is set to a light grey (grey[100]).
The sx prop customizes border colors on the DataGrid root, cells, header, footer, and separators.

Bonus: Adjusting Specific Borders

If you want to target just the grid outer border or individual cell borders, you can tweak the selectors inside sx.

If you want me to help you create a full example with your exact row/column setup or have any other customization, just let me know!