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!
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: