I've been putting in a lot of effort to customize the css for the .MuiDataGrid-window in MaterialUi's DataGrid.
I've been referencing css rules from https://material-ui.com/api/data-grid/
I managed to get it working within createMuiTheme for the root, but couldn't figure out how to style the window. I tried various combinations like MuiDataGrid-window or just 'MuiDataGrid-window' directly under overrides, but nothing seemed to work.
export const theme = createMuiTheme({
overrides: {
MuiDataGrid: {
root: {
backgroundColor: 'red',
},
window: {
width: '120%',
},
},
}
});
My next attempt was using a styled DataGrid component, but that also didn't yield any results.
Both methods were unsuccessful. Using a styled component would be my preferred approach!
const StyledDataGrid = styled(DataGrid)({
MuiDataGrid: {
root: {
backgroundColor: 'green',
},
window: {
width: '120%',
}
}
});
Perhaps I'm completely off track.. But how can I style the CSS attributes in MUI's API such as .MuiDataGrid-mainGridContainer, .MuiDataGrid-overlay, .MuiDataGrid-columnsContainer, .MuiDataGrid-colCellWrapper, and so on?
Thank you very much and hopefully this information proves useful to someone else :)