How do I change the background color of a selected react-bootstrap ToggleButton?

Question

I'm using react-bootstrap and am trying to change the background color of a selected <ToggleButton> to blue.

e.g.:

<ButtonToolbar>
  <ToggleButtonGroup
    type="radio"
    name="options"
    value={...}
    onChange={...}>
    <ToggleButton ... />
    <ToggleButton ... />
    <ToggleButton ... />
  </ToggleButtonGroup>
</ButtonToolbar>

So instead of the dark grey you see below for M/W/F I'd like blue. I've tried a billion CSS tricks and just can't get it to take. Thanks!

Answer 1

You can do this is CSS by adding the following class and style rule.

!important is needed to override the react-bootstrap library's style.

.Btn-Blue-BG.active {
  background-color: blue !important;
}

and

<ToggleButton className="Btn-Blue-BG" ...>

See demonstration below:

https://codesandbox.io/s/6nwkwnn29z

Answer 2

Did you try adding bsStyle="primary" ?

<ButtonToolbar>
    <ToggleButtonGroup
        type="radio"
        name="options"
        value={...}
        onChange={...}>
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
      </ToggleButtonGroup>
    </ButtonToolbar>