Custom class names in react-instantsearch

HI guys,

Using react-instantsearch and trying to change the className for the <InstantSearch /> widget and not having any luck.

Looking around there seems to be no way to actually do it. Is there something I’m missing on how to change it or is it just not possible to do so?

Thanks

Hi Ryan, happy to help. Can you post the code that you’re trying and any errors you’re getting? Also, do you want to share a bit about why you need to change the class name?

Sure thing,

Current cut down code is:

class SearchResults extends React.Component {
    render() {
        const {selectedIndex} = this.props;

        return (
            <InstantSearch
                appId={APPLICATION_ID}
                apiKey={SEARCH_API_KEY}
                indexName={selectedIndex}
                className='srp-search-results'
            >
                {/* This configures the parameters to use when searching Algolia */}
                <Configure hitsPerPage={MAX_PER_PAGE} />

                {/* Other search components here */}
            </InstantSearch>
        );
    }
}

Then when rendering it’s ignoring the className paramater on <InstantSearch /> and showing up:

<div data-reactroot="" class="ais-InstantSearch__root"></div>

Wanting to change the classname where possible to keep naming consistent with our own internal styles. Hoping it is possible, but if not it’s not the end of the world, just wanting to make sure I’m not missing anything completely obvious.

Hi Ryan there’s no way to do so as we wanted to keep a low number of options.

If you want you can wrap InstantSearch with any component with its own css class names.

All CSS class names in React InstantSearch are static and can’t be changed.

Ultimately would you like to be able to do something like customizing the name of all CSS classes of every component used in React InstantSearch?

Hi,

Like I said, no big deal if we cannot do it currently. It’s definitely something nice to have to be able to override the classNames for components.

Currently I’m just using connectors to achieve this with other components, but it’s not possible to do at all for <InstantSearch />, even wrapping it will still end up rendering with the ais namespaced classes.

If this is something ideal for other developers to have control over that’s great to add in, but not the end of the world if not :slight_smile: I may just be overly attached to wanting to control the classes used :slight_smile:

Thanks

@ryan.dowling I am open to an API proposal on GitHub for being able to control the CSS classes namespace and formatting via a global function on InstantSearch component.