Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
layerok opened this issue Apr 19, 2024 · 6 comments · May be fixed by #12901
Open

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

layerok opened this issue Apr 19, 2024 · 6 comments · May be fixed by #12901
Assignees
@cherniavskii
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@layerok
Copy link
Contributor

layerok commented Apr 19, 2024 •
edited by github-actions bot

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
@layerok layerok added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 19, 2024
@layerok layerok mentioned this issue Apr 19, 2024
Closed
@zannager zannager added component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/ labels Apr 19, 2024
@layerok layerok mentioned this issue Apr 19, 2024
Closed
@michelengelen
Copy link
Member

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
Copy link
Member

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

@michelengelen michelengelen added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Apr 22, 2024
@michelengelen
Copy link
Member

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

@michelengelen
Copy link
Member

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

Sandbox

@layerok
Copy link
Contributor Author

layerok commented Apr 23, 2024

@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.

@layerok layerok changed the title [data grid] different background of a cell when hovering on a row [data grid] inconsistent background of a cell when hovering on a row Apr 23, 2024
@cherniavskii
Copy link
Member

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:

@cherniavskii cherniavskii self-assigned this Apr 24, 2024
@cherniavskii cherniavskii linked a pull request Apr 25, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cherniavskii cherniavskii

Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! support: premium standard Support request from a Premium standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Milestone
No milestone
4 participants
@cherniavskii @layerok @michelengelen @zannager