从 react-bootstrap 更改 ToggleButton 颜色答案

【问题标题】：changing ToggleButton colors from react-bootstrap从 react-bootstrap 更改 ToggleButton 颜色
【发布时间】：2021-03-21 01:46:11
【问题描述】：

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

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

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;
}

【问题讨论】：

你好太阳，你能把你说的这个组件的代码包括进来吗？
@MarioPerez 完成！不确定它有多大帮助，但这是我的基本逻辑（我删除了处理程序以使其更易于阅读）
@sun 你试过将!important 添加到你的背景图片吗？
@John 是的！抱歉，我将编辑我的问题以详细说明，但我当前的代码所做的是选定的按钮具有 <.untoggled-button> 的渐变，而未选定的按钮具有相同的渐变并添加了蓝色薄膜。我不确定如何访问切换按钮样式（.toggled-button）只是一个占位符，以及如何删除默认的蓝色胶片。
@sun，我认为 bootstrap 添加了 collapsed 类，所以可能尝试类似 .collapsed {background-image: Your Gradient;}

标签： css reactjs react-bootstrap

【解决方案1】：

将背景颜色设置为透明并添加 .active 类似乎已经奏效了！

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

【讨论】：