Question

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

有没有办法实现这个目标？

Answer 1

要使用BlueprintJS组件，您可以使用连接器。这方面的文档是here，以及一般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的复选框颜色和其他样式？

1 个答案: