[BUG] Row selection - selected (and possibly hover) backgroundColor state

[sKoleff]

material-react-table version

3.1.0

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

I've noticed an issue when using muiTableBodyRowProps with { hover: false, selected: false }. In the previous version, these props worked as expected and did not apply the .Mui-Selected class or related styles on the tr element.

However, in the new version (3.x.x), the behavior has changed. The backgroundColor is now applied to the td element via a pseudo-class (:after) instead of the tr element.

On the pseudo-class styles, there is no check for the selected or hover classes on the parent element. As a result, even when hover and selected are set to false, the styles are still applied.

• selected row styles exist even selected prop is set to false and there is no Mui-selected class on the parent (tr) element:

---

Additional bug or request (not related to the row selection, but related to the tr element and it's backgroundColor):

• there is an !important prop set to the background color of the row (tr element) and in order to change it, I need to overwrite it with my !important state and event select the parent elements:

Minimal, Reproducible Example - (Optional, but Recommended)

muiTableBodyRowProps={{ hover: false, selected: false }}

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.