[data grid] styling disappears on pinned columns in v7.0.0-beta.5

[rajat-brunel]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/inspiring-shadow-cprc2c?file=%2Fsrc%2FDemo.js%3A20%2C36

Steps:

1. Followed the styling tutorial from here: https://next.mui.com/x/react-data-grid/style/#styling-rows
2. Followed the pinned tutorial from here: https://next.mui.com/x/react-data-grid/column-pinning/
3. Combined them and the styling disappears if a column is pinned and comes back on once it's unpinned.
4. Works as intended on version 6.19.6

Current behavior

The styling for a row or a cell is disappearing if that specific column is pinned.

Expected behavior

The styling for a row or a cell should still be applied if that specific column is pinned.

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: component: data grid feature: column pinning
Order ID: 79393

[michelengelen]

Hey @rajat-brunel could you please make the sandbox public? It seems to be private.

[rajat-brunel]

Hey @rajat-brunel could you please make the sandbox public? It seems to be private.

Hi @michelengelen sorry yea, it's public now. Here is the link : https://codesandbox.io/p/sandbox/inspiring-shadow-cprc2c?file=%2Fsrc%2FDemo.js%3A20%2C36

[michelengelen]

Hey @rajat-brunel ... I have fiddled around a bit with our striped row example myself and here is what I came up with: striped rows with pinned columns

The change I did was simply targeting the cell classes and not the rows.

One thing though: There is still some leftover background on the pinned cells when hovering a row. This is due to a change in @next.

@romgrk the pinned columns cannot be styled anymore. This seems like a little regression. Could you check that please?

[rajat-brunel]

Hey @rajat-brunel ... I have fiddled around a bit with our striped row example myself and here is what I came up with: striped rows with pinned columns

@michelengelen this link opens up the same code sandbox that's on the original post, Can you please post the one that you had changed ? Thank you.

[romgrk]

Here is a simplified example covering the default/hover cases, you can add the selected case following this model: https://codesandbox.io/p/sandbox/proud-rain-82w9pr?file=%2Fsrc%2FDemo.js%3A169%2C1

You need to set the background on the cells, not the rows. You also can't use transparent pinned cells, because there is content behind them. If you want a specific color, you need to blend it yourself or use color-mix().

[rajat-brunel]

Ah okay, I see, I will set the colours on the cells not the row.
Thank you!

[michelengelen]

Hey @rajat-brunel ... I have fiddled around a bit with our striped row example myself and here is what I came up with: striped rows with pinned columns

@michelengelen this link opens up the same code sandbox that's on the original post, Can you please post the one that you had changed ? Thank you.

I am sry ... I did miss the notification for this. Thanks @romgrk for providing a solution ... mine was basically the same! :D

Great to see that we could be of help @rajat-brunel

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @rajat-brunel?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.