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

I have ToggleRefinement checkboxes in my project and was trying to style it using ".ais-ToggleRefinement-checkbox {}" but the only thing that seems to be able to change is the font-size to make the checkbox bigger. Color and background-color doesn't do anything. I'd like to change the colors (especially the color when the checkbox is checked) and possibly other styling of the checkbox since I'm using BlueprintJS custom checkboxes in other parts of my website and I'd like the styling to be consistent between them.

Is there any way to achieve this?

To use the BlueprintJS components, you can use a connector. The docs for that are here and a guide for connectors in general here. This would look slightly like this:

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