Adding an additional className to a react-instantsearch component

Hi!

I’m using react-instantsearch together with Bootstrap.

I’d like to add an additional className to an InstantSearch widget, so it gets styled by Bootstrap. For example, I’m adding the Bootstrap class “form-control” to the tag in a MenuSelect widget. I couldn’t find any way to do this during render, so I’m adding it using jQuery in componentDidMount (pretty clunky).

Rheostat, for example, has an optional className prop that gets applied to the root element. (https://github.com/airbnb/rheostat)

Any workaround I’m missing?

Thanks!
-Matt

Hey Matt,

Unfortunately this is not possible as of today. However, you can use existing class names to style our widgets as you want (please refer to https://community.algolia.com/react-instantsearch/guide/Styling_widgets.html for more information).

You can also use connectors (https://community.algolia.com/react-instantsearch/guide/Connectors.html) to create your own widget and then use your custom DOM.

Hope that helps?

Ronan

Thanks for the reply. Yep, I’ve got a workaround for now (adding the class after render). React libraries seem to take different approaches to whether or not classes can be added to a root component as a prop. I’d find it useful here, but if you’re not hearing this need from many others, no need to add complexity.

Thanks!