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

Issue

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!

Solution

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

Answered By - Shawn Andrews