search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.79k stars 1.12k forks source link

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

Open layerok opened 2 weeks ago

layerok commented 2 weeks ago

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

https://github.com/mui/mui-x/assets/18424848/716a12ac-713d-4e71-aa29-4ec2bccbc7a6

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 commented 1 week ago

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)):

Screenshot 2024-04-22 at 12 40 02

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 commented 1 week ago

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

michelengelen commented 1 week ago

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

michelengelen commented 1 week ago

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

Sandbox

layerok commented 1 week ago

@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 commented 1 week ago

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: