CODEWITHSUNDEEP
cssreactjsreact-bootstrap
Dave Cole
Dave Cole

Reputation: 2765

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

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!

togglebuttonexample

Upvotes: 7

Views: 9132

Answers (2)

Shawn Andrews
Shawn Andrews

Reputation: 1442

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

Upvotes: 3

AbhaY
AbhaY

Reputation: 126

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>

Upvotes: 1

Related Questions