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

Question

我正在使用 react-bootstrap 并尝试更改所选 <ToggleButton> 的背景颜色到蓝色。

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

所以不是你在下面看到的 M/W/F 的深灰色，我想要蓝色。我已经尝试了 10 亿个 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