I'm so confused about how to change the complete row header background color of the DataGrid in the new MUI 5 styling. I think the doc didn't get updated for the new Emotion styling system. Could anyone help me out?
UPDATE:
Ok so I figured out how to actually make a change but I'm using the old makeStyles from Mui 4 is there an alternative to that ?
Here's the code :
import * as React from 'react';
import { DataGrid, frFR } from '@mui/x-data-grid';
import { IconButton } from '@mui/material';
import { Home } from '@mui/icons-material';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { makeStyles } from '@mui/styles';
const rows = [
{
id: 1,
col1: '12345 SEIGNEURS, BOULEVARD DES',
col2: 'TERREBONNE',
col3: '1',
col4: '2',
col5: '3',
col6: '4',
},
{
id: 2,
col1: '12345 SEIGNEURS, BOULEVARD DES',
col2: 'TERREBONNE',
col3: '5',
col4: '6',
col5: '7',
col6: '8',
},
{
id: 3,
col1: '12345 SEIGNEURS, BOULEVARD DES',
col2: 'TERREBONNE',
col3: '9',
col4: '10',
col5: '11',
col6: '12',
},
];
const columns = [
{
field: 'col1',
headerClassName: 'Test',
headerName: 'Adresse',
sortable: false,
width: 375,
},
{ field: 'col2', headerName: 'Secteur', sortable: false, width: 235 },
{ field: 'col3', flex: 1, headerName: 'Nombre de logement', sortable: false },
{ field: 'col4', flex: 0.5, headerName: 'Déchets', sortable: false },
{ field: 'col5', flex: 0.5, headerName: 'Recyclage', sortable: false },
{ field: 'col6', flex: 0.5, headerName: 'Organique', sortable: false },
];
const theme = createTheme();
const styles = makeStyles((theme) => ({
root: {
borderLeft: 0,
borderRight: 0,
borderBottom: 0,
'& .cold': {
backgroundColor: '#b9d5ff91',
color: '#1a3e72',
},
'& .hot': {
backgroundColor: '#ff943975',
color: '#1a3e72',
},
},
}));
export default function DataTable() {
const handleClick = (params, event) => {};
const classes = styles();
return (
<ThemeProvider theme={theme}>
<div sx={{ height: 300, width: '100%' }}>
<DataGrid
autoHeight
className={classes.root}
getCellClassName={(params) => {
if (
params.field === 'col3' ||
params.field === 'col4' ||
params.field === 'col5' ||
params.field === 'col6'
) {
return params.value >= 3 ? 'hot' : 'cold';
}
return '';
}}
columns={columns}
disableColumnMenu
localeText={frFR.components.MuiDataGrid.defaultProps.localeText}
rows={rows}
onRowClick={(params, event) => handleClick(params, event)}
/>
</div>
</ThemeProvider>
);
}