javascript - How can I customize the MUI X Data Grid header outline? - Stack Overflow

I'm trying to customize the outline (border) of the MUI X Data Grid to match a different design. Currently, it looks like this: from

to

Is there any reference material or example code that demonstrates how to achieve this? I can't upload my code for some reason, but I’d appreciate any guidance or code snippets. Thanks!

I'm trying to customize the outline (border) of the MUI X Data Grid to match a different design. Currently, it looks like this: from

to

Is there any reference material or example code that demonstrates how to achieve this? I can't upload my code for some reason, but I’d appreciate any guidance or code snippets. Thanks!

• javascript
• reactjs
• material-ui
• mui-x-data-grid

Share edited Mar 25 at 10:19 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Jan 3, 2022 at 8:43 miumiu 7111 gold badge11 silver badge22 bronze badges

 | 

5 Answers 5

Sorted by: Reset to default 14

simplest way to customize the datagrid is using sx props. you can check all the available css rules on https://mui./api/data-grid/data-grid/#css

to remove datagrid border use .MuiDataGrid-root rule and inside it you can add border properties. I see you have removed column separator too. To do so use .MuiDataGrid-columnSeparator

if you check below code I have prefixed .MuiDataGrid-root with & sign. but haven't added & sign to .MuiDataGrid-columnSeparator. you can open your chrome developer tool and see if the associated CSS rule has any parent class attached to it or not. if it has any you can prefix the rule with &. this way you don't have to write full class rule.

<DataGrid
  ...
  sx={{
    '.MuiDataGrid-columnSeparator': {
      display: 'none',
    },
    '&.MuiDataGrid-root': {
      border: 'none',
    },
  }}
/>

MUI Data Grid Header Styling

const columns: GridColumns = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
];

More examples with below link https://mui./x/react-data-grid/style/

Only use defaultColumns for mui grid and set font size, color and other properties like following code :

const defaultColumns: GridColDef[] = [


 {
    flex: 0.1,
    field: 'name',
    minWidth: 100,
    align: 'center',
    headerAlign: 'center',
    renderHeader: () => <Typography sx={{ fontSize: '9px' }}>{'Header Title'}</Typography>,
    renderCell: ({ row }: CellType) => (
      <Typography
        sx={{ fontSize: '12px' }}
      >{`#${row.name}`}</Typography>
    )
  },
....
]

use renderHeader for header customize and renderCell for rows in grid

try this mui data grid header styling:

'& .super-app-theme--header': {
     backgroundColor: '#7BF3A4',
 },

and do not forget headerClassName: 'super-app-theme--header' to put in rows while defining the rows of datagrid

Adding this className to the DataGrid sx allows you to manipulate the individual headers but not the whole container. You can still set background colors and margins as you want.

'& .MuiDataGrid-columnHeader': {
                    backgroundColor: 'your-color-constant',
                }