更改 Algolia React Instant Search 组件的样式答案

【问题标题】：Change styling of Algolia React Instant Search component更改 Algolia React Instant Search 组件的样式
【发布时间】：2019-10-25 00:33:59
【问题描述】：

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

我已经注释掉了对在线样式表的引用 ..<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">

我想得到它，以便我的命中组件显示为没有项目符号的列表。所以我创建了一个样式添加到我自己的样式表中..

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

但是，Hits 仍然显示为带有项目符号的列表。

当我在浏览器中检查组件时，我可以看到 ul 项目具有以下属性..

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

类如下..

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

从哪里得到这个“ais-Hits-list”，我该如何改变它？

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

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

【问题讨论】：

这是查找元素的正确方法。阅读文档/查看检查员。所以只需申请：.ais-Hits-list{list-style: none;}
如何应用它？这基本上就是我在上面单独的 css 文件中的内容，我将它应用于 hits 组件。但它不起作用。
@chucknor 我怎样才能显示 3 列？

标签： css reactjs instantsearch.js

【解决方案1】：

您的问题的答案在于 React InstantSearch documentation。

正如它所说：

react-instantsearch-dom 命名空间下的所有小部件都带有固定的 CSS 类名称。这些类名的格式是ais-NameOfWidget-element--modifier。每个小部件使用的不同类名称在其各自的文档页面上进行了描述。您还可以相应地检查底层 DOM 和样式。

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

只需将import "./style.css" 转至Search.js 即可轻松格式化。例如，

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

【讨论】：