How to change row color on hover?

[Klaus-8]

I'm trying to change row color on mouse hover.
I have tried :

muiTableBodyRowProps={({ row }) => ({ sx: { '&:hover': { backgroundColor: '#e8f1fd' } } })}

But this doesn't worked.
Is their any other way to achieve it?

[jrmalin]

Try using '&:hover td', so muiTableBodyRowProps={({ row }) => ({ sx: { '&:hover td': { backgroundColor: '#e8f1fd' } } })}!

[davidloh85]

I did that, but if you enable renderDetailPanel, the hover effect appears onto the container holding the reactNode element that is being displayed as well.

I guess the container was treated as a as well.