如何更改选定的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

您可以通过添加以下类和样式规则在 CSS 中做到这一点。

需要 !important 来覆盖 React-bootstrap 库的样式。

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

和

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

请参阅下面的演示：

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