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

Posted 2023-02-22

【中文标题】如何更改所选 react-bootstrap ToggleButton 的背景颜色？

【英文标题】：How do I change the background color of a selected react-bootstrap ToggleButton?

【发布时间】：2019-04-29 19:25:08

【问题描述】：

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

例如：

<ButtonToolbar>
  <ToggleButtonGroup
    type="radio"
    name="options"
    value=...
    onChange=...>
    <ToggleButton ... />
    <ToggleButton ... />
    <ToggleButton ... />
  </ToggleButtonGroup>
</ButtonToolbar>

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

【问题讨论】：

您是否在此处查看过自定义样式：react-bootstrap.github.io/utilities/custom-styles

【参考方案1】：

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

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

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

和

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

请看下面的演示：

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

【讨论】：

做到了 - 谢谢！ -- 知道如何获得他们所拥有的漂亮渐变效果吗？

知道了：background-image: linear-gradient(#295c87, #3679b2) !important;

后续问题 - 我将如何设置所述按钮的活动/悬停状态？

您可以添加一个新规则，.Btn-Blue-BG.active:hover ... 用于设置悬停在选定按钮上的样式，.Btn-Blue-BG:hover ... 用于设置未选定和选定按钮的悬停样式

【参考方案2】：

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

【讨论】：

差不多了！但是，我希望只有 checked 状态具有“主要”样式。

你怎么知道primary 样式会设置为蓝色？