I am facing a challenge in trying to override the CSS property position on the .MuiDataGrid-columnsContainer. Upon reviewing the information available on https://material-ui.com/api/data-grid/#css, it seems that there is a rule defined for root but not specifically for .MuiDataGrid-columnsContainer. Despite my efforts to understand the process of overriding CSS properties as outlined in the documentation, I have been unsuccessful in applying changes to this particular class.
Typically, I would utilize the following approach:
const useStyles = makeStyles({
paper: {
background: '#010310',
}
});
This would be followed by implementing it like so:
const classes = useStyles();
return (
<DataGrid classes={{ paper: classes.paper }} />
);
However, attempting to substitute the term paper with columnsContainer both in the makeStyles declaration and within the return statement has not yielded the desired outcome.
Possible Explanations for the Issue
Upon consultation of the datagrid CSS documentation provided (referenced link), it appears that the only existing Rule pertains to root. Since no specific Rule is defined for .MuiDataGrid-columnsContainer, an alternative method may need to be implemented. Regrettably, alternative strategies I have attempted so far have not proven effective.
I am grateful for any assistance offered. Thank you!