[data grid] inconsistent background of a cell when hovering on a row

[layerok]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/happy-beaver-khy7nd?file=%2Fsrc%2FDemo.tsx%3A47%2C13

Steps:

1. Hover over a row

row-hover-different-background.mov

Current behavior

The background of a cell in a hover row is different in a pinned column when using the css vars provider

Expected behavior

The background of a cell in a hover row isn't different in a pinned column when using the css vars provider

Context

No response

Your environment

No response

Search keywords: hovered row cell background color vars
Order ID: 74777

[michelengelen]

Hey @layerok ... you are using a color as background which has a 0.04 value in the alpha channel (rgba(0, 0, 0, 0.04)):

The color that is being applied is correct as can be seen in the screenshot above.
The reason this looks darker is that the color from the back does "shine through".

You would need to apply a solid color, otherwise the background will always be visible.

[michelengelen]

I just saw that the value comes from the CSSVarsProvider ... it seems we have some kind of bug in that regard.

[michelengelen]

@mui/xgrid It does happen due to the @mui/material being installed as next ... We should keep an eye out on this.

[michelengelen]

Note: this is the sandbox with the latest version of material-ui installed, where the hover color is correct (no alpha channel)

Sandbox

[layerok]

@michelengelen Honestly I don't fully understand the problem, but I understand that if you remove any influence of CssVarsProvider on the row background color, the problem will be solved. This is exactly what I did in connected PR. Of course, the question of how to overwrite the row background color via CssVarsProvider stays open, but at least the bug is solved.

[cherniavskii]

Note: this is the sandbox with the latest version of material-ui installed, where the hover color is correct (no alpha channel)

Sandbox

@michelengelen I can reproduce the issue in this codesandbox:

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @layerok! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!