Dynamic background color Highlight - react-instantsearch

Hi, I was wondering if anyone might have any suggestion on how to make the matching hits highlighted background color dynamic when using the Highlight component from react-instantsearch.

My use case is that I have a search component that uses the default styling and default highlight color, but I have a prop called “makeHitsTransparent” that I want to use to change the styling of the search component. This includes changing the background color of the highlighted form of relevant hits.

Since I don’t have control of the Highlight component this becomes difficult finding a solution. I am using jss/react-jss for our styling, which does not give access to alter styles using props.

Any suggestions would be greatly appreciated!

Hello @mmojica

For these special use cases where you need to take control of the component there is the connectors API. You can read more about connectors in the documentation here: https://community.algolia.com/react-instantsearch/guide/Connectors.html

For the Highlight component, there is the connectHighlight with it’s own documentation here: https://community.algolia.com/react-instantsearch/connectors/connectHighlight.html

I hope this will help, feel free to ask us anything else :slight_smile:

Cheers, Maxime.

Thanks, Maxime! This seems to be exactly what I needed. I appreciate your help! :star_struck:

1 Like