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

Answer 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?