Exploring the capabilities of the React Instant Search library has been a fun journey for me so far. The functionality is working as expected, but now I am eager to customize the styling of the components.
In my experimentation, I have disabled the link to the online stylesheet by commenting it out:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
To achieve a specific look where my hit components are displayed in a list format without bullet points, I decided to add a CSS style to one of my own style sheets:
.InstantSearch{
list-style: none;
}
I then referenced 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>
);
Despite these efforts, the Hits continue to be displayed with bullet points in a list format.
When inspecting the component in the browser, I noticed that the ul element has the following 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;
}
Furthermore, the class associated with the ul element is:
<ul class="ais-Hits-list">
I am puzzled about where this 'ais-Hits-list' class is coming from and how I can modify it.
Admittedly, I am quite new to JavaScript and front-end development, so perhaps this question may seem trivial. The Algolia documentation, for me at least, does not provide clear guidance on customizing certain components.