Question

我正在设置Algolia Instantsearch.js，我想替换默认的搜索框提交按钮图标。

docs显示使用小部件类名称来设置图标颜色的样式，但是我不知道如何用另一个svg替换svg图标。

这是Algolia为“提交”按钮图标生成的默认代码：

Answer 1

Algolia的InstantSearch.js中的小部件带有预定义的呈现。您可以为它们设置样式，但是如果您对实际的渲染不满意（即，为小部件生成的HTML），则必须创建自己的样式。

在要定制现有窗口小部件的情况下（这就是您的情况），它们提供了一种聪明的机制，称为“连接器”。他们基本上已经将小部件的行为/逻辑与其呈现分离。不同的连接器为每个搜索组件提供逻辑，并且小部件在这些连接器的顶部提供了一个UI。

因此，在您的情况下，您需要查看documentation on connectors并继续使用connectSearchBox connector创建自己的searchBox小部件。

Answer 2

您正在使用哪个InstantSearch？在React InstantSerach v5中，您可以替换默认SearchBox中的图像，而无需创建自定义Searchbox：

<SearchBox
  reset={<img src="/reset.png" alt=""/>}
/>