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

Question

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

有什么办法可以做到这一点？

Answer 1

要使用BlueprintJS组件，您可以使用连接器。相关文档在这里，一般连接器指南在这里。这看起来有点像这样：

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