如何更改 react-instantsearch 的复选框颜色和其他样式？

Question

我的项目中有 ToggleRefinement 复选框，并尝试使用“.ais-ToggleRefinement-checkbox {}”对其进行样式设置，但似乎唯一可以更改的是字体大小以使复选框变大. color 和 background-color 没有任何作用。我想更改颜色（尤其是复选框被选中时的颜色）以及复选框的其他样式，因为我在网站的其他部分使用了 BlueprintJS 自定义复选框，并且我希望样式在两者之间保持一致他们。

有什么办法可以实现吗？

Answer 1

要使用 BlueprintJS 组件，您可以使用连接器。相关文档是 here and a guide for connectors in general here。这看起来有点像这样：

import React from "react";
import { Checkbox } from "@blueprintjs/core";
import { connectToggleRefinement } from "react-instantsearch/connectors";

const Toggle = ({ refine, currentRefinement, label }) => (
  <Checkbox
    checked={currentRefinement}
    label={label}
    onChange={() => refine(!currentRefinement)}
  />
);
const ToggleRefinement = connectToggleRefinement(Toggle);

const App = () => (
  <InstantSearch>
    {/* add the rest of the app */}
    <ToggleRefinement
      attribute="materials"
      value="Made with solid pine"
      label="Solid Pine"
    />
  </InstantSearch>
);

如何更改 react-instantsearch 的复选框颜色和其他样式？

How to change checkbox color and other styling for react-instantsearch?

checkbox

algolia

react-instantsearch