When dealing with horizontal scrolling, relying on the nth-child styling may not be the most reliable approach. This is because the data grid virtualizes columns as you scroll horizontally, leading to not all columns being rendered at all times, causing disruptions in the nth-child styling.
An extreme example showcasing this issue can be seen in action here, with 30 columns and customized colors on the 3rd and 4th columns using nth-child CSS selectors: https://codesandbox.io/s/horizontal-scrolling-tlmqeh?file=/demo.tsx.
In the provided example, the styling is applied similarly to your CSS:
<DataGridPro
sx={{
"& .MuiDataGrid-columnHeader:nth-child(3)": {
backgroundColor: "red",
color: "#ffffff",
fontWeight: "bold"
},
"& .MuiDataGrid-columnHeader:nth-child(4)": {
backgroundColor: "purple",
color: "#ffffff",
fontWeight: "bold"
}
}}
apiRef={apiRef}
onCellClick={handleCellClick}
hideFooter
{...data}
/>
To address this issue, it is recommended to utilize the headerClassName in the column definitions, as outlined in the documentation here: https://mui.com/x/react-data-grid/style/#styling-column-headers.
Here is a modified version of the previous example that incorporates the use of headerClassName: https://codesandbox.io/s/horizontal-scrolling-087h4m?file=/demo.tsx
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 100
});
// data.columns[0] represents the hidden id column, while data.columns[1] is the first visible column definition.
data.columns[3].headerClassName = "red-header";
data.columns[4].headerClassName = "purple-header";
...
<DataGridPro
sx={{
"& .MuiDataGrid-columnHeader.red-header": {
backgroundColor: "red",
color: "#ffffff",
fontWeight: "bold"
},
"& .MuiDataGrid-columnHeader.purple-header": {
backgroundColor: "purple",
color: "#ffffff",
fontWeight: "bold"
}
}}
apiRef={apiRef}
onCellClick={handleCellClick}
hideFooter
{...data}
/>