Question

我正在使用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>
        );

但是，“命中”仍然显示为带有要点的列表。

当我在浏览器中检查组件时，我可以看到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”，我该如何更改？

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

关于Algolia的文献并不清楚（至少对我而言不是这样），人们如何可以改变某些组件的样式。

Answer 1

我没有足够的声誉来发表评论，因此我需要创建一个完整的答案，以在您提出要求的地方回答您的评论。

“我如何应用它？这本质上就是我在上面单独的css文件中所拥有的，并将其应用于hits组件。但这是行不通的。–”

如果您正确地应用了它，但是它不起作用，那么您就没有正确地应用它。

该组件已经具有样式，并且由于它已经具有样式，因此它已经具有类。

您不需要className={classes.InstantSearch}

因为它附带了

className="ais-Hits-list"

该类已经存在，因为这是Algolia生成它的方式，并且正是该类为您提供了您所看到的list-style : disk属性。

可以使用多种方法来定位此类，但最简单的方法是制作新的样式表。假设我们将此样式表称为search.css并将其导入到您的react文件中。

import "./search.css";

现在，做出反应的人知道您的CSS了，您可以定位该类。

.ais-Hits-list {
  list-style: none;
}

如果您需要了解其他内置的Algolia类，只需检查开发工具中的CSS。然后以完全相同的方式定位它们，您可以覆盖它们附带的默认样式。

Answer 2

您的问题的答案在于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;
}

更改Algolia React Instant Search组件的样式

2 个答案: