Css 更改Algolia React即时搜索组件的样式

我正在使用React Instant Search库，让它在功能上正常工作，但是我想更改组件的样式

我已经注释掉了对在线样式表的引用。

我想得到它，使我的命中组件显示为一个没有要点的列表。所以我创建了一个样式，并在我自己的样式表中添加了一个样式

.InstantSearch{
    list-style: none;
}

我在我的应用程序中引用了这种风格

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>
        );

课程安排如下

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

这张“ais点击列表”是从哪里来的？我该如何更改

很明显，我不熟悉Javascript和前端开发，所以我确信这是一个非常愚蠢的问题

---

Algolia文档并没有说明（至少对我来说）如何更改某些组件的样式。

您的问题的答案在于React InstantSearch

正如它所说：

react instantsearch dom命名空间下的所有小部件都附带有固定的CSS类名。 这些类名的格式是

ais NameOfWidget元素--modifier

。 每个小部件使用的不同类名在各自的文档页面上进行了描述。您还可以相应地检查底层DOM和样式

因此，对Chrome/Firefox开发者工具的简单检查将显示ReactInstantSearch的每个元素都有不同的类名，例如

ais-InstantSearch\uuu root

只需将“/style.css”导入

Search.js

即可轻松格式化。比如说,

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

---

这是找到元素的正确方法。阅读文档/查看检查员。所以只需应用：

.ais Hits list{list style:none；}

如何应用它？这基本上就是我在上面单独的css文件中的内容，我将其应用于hits组件。但它不起作用@chucknor我怎么能展示3个柱？

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