从 react-bootstrap 更改 ToggleButton 颜色

Question

我的应用程序中有一组 ToggleButton，我想更改它们的背景颜色。目前，我的代码为所有按钮提供了 <.untoggled-button> 的渐变，未选中的按钮具有该渐变并添加了蓝色薄膜。我有两个问题：我想移除未切换按钮上的蓝色薄膜，我需要访问切换按钮以更改其样式。 <.toggled-button> 只是一个占位符，现在什么都不做。

我想知道如何在我的 css 中访问 unchecked 和 checked 版本的 ToggleButtons，至于覆盖默认 bootstrap 样式！

jsx:

<ToggleButtonGroup className="view" type="radio" name="options" defaultValue={2}>
        <ToggleButton value={1} className="untoggled-button" > title</ToggleButton>
        <ToggleButton value={2} className="untoggled-button"> title</ToggleButton>
        <ToggleButton value={3} className="untoggled-button"> title</ToggleButton>
</ToggleButtonGroup>

css（这是非常不正确的，但我希望能够同时设置未选中和选中按钮的样式）：

.untoggled-button{
  background-image: some gradient !important;
}
.toggled-button {
  background-image: another gradient !important;
}

Answer 1

将背景颜色设置为透明并添加 .active class 似乎有效！

.untoggled-button{
  background-image: some gradient !important;
  background-color: transparent !important;
}
. untoggled-button.active {
  background-image: another gradient !important;
}

从 react-bootstrap 更改 ToggleButton 颜色

changing ToggleButton colors from react-bootstrap

css

reactjs

react-bootstrap