Adjust the appearance of the Algolia React Instant Search feature

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.

Answer №1

If you're looking for the answer to your query, look no further than the React InstantSearch guide.

According to the documentation:

All widgets within the react-instantsearch-dom namespace come with predefined CSS class names. These class names follow the format of

ais-NameOfWidget-element--modifier
. The unique classes used by each widget are outlined in their specific documentation pages. You can also examine the underlying DOM structure and style accordingly.

A quick peek at the Developer Tools in Chrome/Firefox will reveal distinct class names for each element in ReactInstantSearch, like ais-InstantSearch__root.

Simply add import "./style.css" to your Search.js file for easy customization. For instance,

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to convert CSS to JSS for Material-UI styling?

I need to convert some basic CSS to JSS and include it in the global Styles.js file. The original CSS is as follows: .formdetail { display: grid; grid-row-gap: 10px; grid-template-columns: 1fr 3fr; margin: 20px; } .formdetail .cell { display: ...

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

What is the data structure of the Meteor app for the user currently using it?

Working with React and Meteor has been my recent focus. In my setup, there's a MainWrapper component at the top level. This component displays loading when User data is not yet available, login/register options if no user is logged in, and reveals th ...

What is the best method to display a Component in React and reset its lifecycle whenever it is shown?

As a beginner in node.js and react, I decided to embark on the journey of creating a chat app using socket.io. I followed some tutorials on setting up rooms, joining/leaving them, and messaging within the rooms. To pass one socket instance, I utilized Reac ...

There was an error with a prop type validation in `ForwardRef(DataGrid)`: the prop `rows` is specified as required but its value was found to be `undefined

https://i.sstatic.net/6ZI00.png https://i.sstatic.net/C85mq.png The following code snippet showcases the creation of a datatable component with functionality to add new users: return ( <div className="datatable"> <div classNa ...

Options for regular expressions in CSS: match letters regardless of case and search for all occurrences

Here is the HTML I am working with: <div> <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img> <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img> </div> Additionally, I have the following CSS co ...

What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead? <div class="container-fluid&qu ...

Transfer multiple files by dragging and dropping them into a single file upload option

I was experimenting with adding a drag and drop feature to my website. After trying several scripts, I came across one on CodePen. However, the script allows for the upload of multiple files, while I only need to upload a single PDF or .doc file. Can someo ...

When you incorporate bootrap-react from NPM into your project, a new package-lock file is generated within Visual

I'm a beginner with react and I'm currently working on integrating react-bootstrap into my project. The project I'm working on has multiple projects in Visual Studio. From what I've gathered, adding a Bootstrap package is necessary for ...

What could be the reason for the title template not being implemented in the Next.js metadata for my homepage?

Currently, I am in the process of developing a Next.js project and working on setting dynamic metadata for various pages. Specifically, I want to display the title of my homepage as "Home | My Website", but unfortunately it is only showing as "Home". Below ...

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

Display content at the bottom using CSS

I have scoured both SO and Google for an answer to my problem, but haven't had any luck. I am trying to achieve a simple task, but I'm unsure of how to do it. Here is the scenario: Currently, I am working on a website using HTML, CSS, and Bootst ...

Bootstrap badge is encountering loading issues

My index.html isn't displaying the badge correctly on any browser. The numbers aren't showing up in a colored circle, it looks like the CSS didn't load properly. I've tried using both local and CDN paths for bootstrap and jquery, but t ...

Develop a chart featuring sub-categories and column headings

I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...

Setting new query parameters while maintaining existing ones without deleting them in Next.js v13

"use client"; import { useCallback, useEffect, useState } from "react"; import Accordion from "../accordion/accordion"; import { useRouter, usePathname, useSearchParams, useParams, } from "next/navigation"; i ...

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

Is there a way to verify in CSS whether a specific class has already been defined?

Can CSS be used to determine if a specific class has already been defined in previous CSS code, similar to an if statement like if (defined('.main'.) { do this} else {do that}? Is this functionality available in CSS or perhaps in CSS 3.0? Is it ...

What could be causing Prettier code formatter to suddenly stop formatting in VS Code?

I've been having trouble formatting my code using Prettier in VS Code. Even after reinstalling it, the issue persists and I can't seem to format my HTML/CSS code properly. The screenshot I provided shows that the code remains unformatted even aft ...

What's the difference between Npm's fetch and node-fetch?

It's quite perplexing how similar these package names are in the npm registry. 'fetch' appears to be outdated with no recent activity, yet it is not marked as deprecated (last commit 3 years ago). Judging by the number of downloads, users mi ...

Positioning Alignment for a CSS Layout with Two Columns

I am trying to achieve a specific layout using CSS. I want the signature to align with the bottom of the other boxes in the design. The challenge is that either box can have different amounts of content, and the signature should always align with the lowes ...