Как изменить цвет флажка и другие стили для react-Instantsearch?

У меня есть флажки ToggleRefinement в моем проекте, и я пытался стилизовать его с помощью ".ais-ToggleRefinement-checkbox {}", но единственное, что, похоже, можно изменить, - это размер шрифта, чтобы увеличить флажок. Color и background-color ничего не делают. Я хотел бы изменить цвета (особенно цвет, когда флажок установлен) и, возможно, другой стиль флажка, поскольку я использую настраиваемые флажки BlueprintJS в других частях моего веб-сайта, и я бы хотел, чтобы стиль был согласован между их.

Есть ли способ добиться этого?


checkbox algolia react-instantsearch
person mayaah    schedule 11.03.2018    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Чтобы использовать 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>
);
person Haroen Viaene    schedule 12.03.2018
comment
Это круто! Я не знал, что разъемы - вещь, ха-ха. У меня есть дополнительный вопрос: я просмотрел документы и последовал вашему примеру, который, как я знаю, не точен, и флажок правильно включается и отображает правильный результат поиска, но не отключается правильно. Я даже не думаю, что доработка изменений запущена. Есть ли у вас догадки, почему? - person mayaah; 13.03.2018
comment
^ значение атрибута является логическим, кстати - person mayaah; 13.03.2018
comment
Вы можете попробовать изменить его на () => refine() - person Haroen Viaene; 13.03.2018
comment
Привет, @mayaah, я обновил код, для уточнения в текущей версии необходимо, чтобы уточнение было передано, см. демонстрацию по адресу codeandbox.io/s/mm0z6jrx1p - person Haroen Viaene; 13.03.2018