如何更改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>
);