Search keywords

data grid styling column header

Latest version

• I have tested the latest version

Affected products

Data Grid

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/devbox/data-grid-base-forked-qrp42k?workspaceId=ws_GSyKqZMEdPCJM8JwxJ5NKj
2. Scroll horizontally very fast

Current behavior

the header background color is not visible in the columnHeaders div

Expected behavior

keep the header background color at all times

Context

I figured out that the issue is due to a style container--top [role=row] that sets the background to the background base, and this component is in between the columnHeaders div and the columnHeader divs. This basically negates the styling set on columnHeaders. Unsetting the background solves the issue as shown in the codesandbox

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID: 96051