react-virtualized - Is there a way to add hover style on rows of the Table

Question

When we user hovers on the row, the background color of the respective row should change to #e7e7e7.

Tried to add row effect through JSS, but this allows to have row effect on the cells instead of rows. JSS approach
I tried to add hover effect using the props rowStyle, but this didn't work for me. Using prop rowStyle

score 1 · Accepted Answer · answered Apr 21 '22 at 21:03

1

I'm using styled-components in my project and this is how you can style the row using it.

const StyledTable = styled(Table)`
    .ReactVirtualized__Table__row {
        :hover {
            background: red;
        }
    }
`;

I think you're using the wrong selector.

What styling lib are you using?

answered Apr 21 '22 at 21:03

This worked. My bad, I didn't tried using styled component. Was trying to override the style using makeStyles. Thanks. – Sourabh Kumar Sinha Apr 26 '22 at 11:32

1 Answers1