Change styling of Algolia React Instant Search component

Question

I am playing around with the React Instant Search library and have it working functionally, however I want to change the styling of the components.

I have commented out the reference to the online stylesheet ..<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">

I would like to get it so that my hit components appear as a list without bullet points. So I created added a style to one of my own style sheets ..

.InstantSearch{
    list-style: none;
}

And am referencing this style in my App.

return (
    <div>
        <h1>React InstantSearch e-commerce demo</h1>
        <InstantSearch indexName="questions" searchClient={searchClient}>
            <div>
                <SearchBox/>
                <Hits className={classes.InstantSearch} hitComponent={Hit} />
            </div>
        </InstantSearch>
    </div>
        );

However the Hits still appear as a list with bullet points.

When i inspect the component in the browser I can see that the ul item has the below properties ..

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

And the class is as below ..

<ul class="ais-Hits-list">

Where is it getting this 'ais-Hits-list' from and how can I change this?

As is probably pretty obvious I am new to Javascript and front end development so I'm sure this is a pretty stupid question.

The Algolia documention doesn't make it all that clear (at least not to me) how one can change the styling of certain components.

Answer 1

The answer to your question lies in the React InstantSearch documentation .

As it says:

All widgets under the react-instantsearch-dom namespace are shipped with fixed CSS class names. The format for those class names is ais-NameOfWidget-element--modifier. The different class names used by each widget are described on their respective documentation pages. You can also inspect the underlying DOM and style accordingly.

So a simple inspection of the Developer Tools for Chrome/Firefox will show that each of the elements of the ReactInstantSearch have differentiated classnames, for example ais-InstantSearch__root.

Simply import "./style.css" to the Search.js to easily format. For example,

.ais-InstantSearch__root {
     display: flex;
     border: 1px solid grey;
}