如何更改选定的react-bootstrap ToggleButton的背景颜色？

Question

我正在使用react-bootstrap，并试图将所选 <ToggleButton>的背景色更改为蓝色。

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

因此，您要在下面为M / W / F看到的不是深灰色，而是我要蓝色。我已经尝试了十亿个CSS技巧，但无法接受。谢谢！

Answer 1

您尝试添加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>

Answer 2

您可以通过添加以下类和样式规则来实现此功能。

！important是必需的，以覆盖react-bootstrap库的样式。

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

和

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

请参见下面的演示

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