React-select: Styling selected option, disables :hover on the other options
Hi there,
I'm currently trying to change the color of a selected option in the dropdown. Editing the background color itself, seems alright. But it seems to "disable" the other options when I hover over them. Is this by design? or is it a bug? Or maybe I'm just doing it all wrong?
Codesandbox: https://codesandbox.io/s/kw1qw4l3n7
linda94
>All comments
@linda94, it takes a bit of learning to understand how emotion styles work but they are super powerful and can cover all possible cases. You are in fact overriding all non-selected background colors to "". The component is already calculating what background-color to supply based on the hover state so you can just pass that as the default if not selected.
backgroundColor: state.isSelected ? "red" : styles.backgroundColor,
https://codesandbox.io/s/xzv62vo8kw
Please close this issue if there are no other questions and next time please use stackOverflow for any questions on implementation please.
c-moss-talk
on 7 Mar 2019
Related issues
mjuopperi
路
3Comments
coder-guy22296
路
3Comments
yrabinov
路
3Comments
steida
路
3Comments
pashap
路
3Comments
Most helpful comment
@linda94, it takes a bit of learning to understand how emotion styles work but they are super powerful and can cover all possible cases. You are in fact overriding all non-selected background colors to "". The component is already calculating what background-color to supply based on the hover state so you can just pass that as the default if not selected.
backgroundColor: state.isSelected ? "red" : styles.backgroundColor,https://codesandbox.io/s/xzv62vo8kw
Please close this issue if there are no other questions and next time please use stackOverflow for any questions on implementation please.