Material-ui: ListItem background color changes to default on hover

[anshchauhan]

Hi guys,

If I'm setting the background color of the list manually its getting changed back to default after hover:
<ListItem rightIcon={...} primaryText={this.props.primary} secondaryText={this.getSecText()} style={{background:'#f6f6f6'}} onClick={this.handleOpen}/>

I also tried changing the background color using innerDivStyle. But my hover stopped working completely in that case. May be there's a better way of changing background color that I'm not aware of?

[benrosenblum]

I had a similar issue. Try using backgroundColor instead of background in your overridden style.

[anshchauhan]

Hi @benrosenblum,
Thanks for your reply.
If I do that, my hover effect stops working. How did u get around that one?

[benrosenblum]

@anshchauhan I didn't. I'm using a color override on the ListItem embedded in a MenuItem to indicate the active item. Hover effect wasn't needed there.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[arikaa]

I'm having a similar issue. When I change the on hover color of the Chip, it only works when the style of the Chip is NOT overwritten. As soon as I set the style in the component, the on hover doesn't work anymore. Did anyone find a solution to this?