react-places-autocomplete
react-places-autocomplete copied to clipboard
Adding CSS property to active descendant
Do you want to request a feature or report a bug? Feature
What is the current behavior? When highLightFirstSuggestion prop is set to true, the active descendant has a very light background which is difficult to see. Is there a way to adjust this CSS property?
Which versions of ReactPlacesAutocomplete, and which browser / OS are affected by this issue? ^7.3.0
Here's how I'm setting the foreground and background of the suggestions:
<div>
{loading && <div>Loading...</div>}
{suggestions.map((suggestion) => {
const style = suggestion.active
? { backgroundColor: "#2C74B3", cursor: "pointer" }
: { backgroundColor: "#ffffff", cursor: "pointer" };
return (
<div {...getSuggestionItemProps(suggestion, { style })}>
{suggestion.description}
</div>
);
})}
</div>
This sets the selection floor to a light blue and the background color to white. You can change those values as you see fit.