如何覆盖React Bootstrap中ToggleButton开关按钮的默认CSS样式

问题原因 #

React Bootstrap 的ToggleButton激活状态默认内置了background-image渐变属性，且原生样式规则权重更高，你写的.untoggled-button.active规则无法覆盖原生样式，导致激活色不生效。

解决方案 #

直接替换你App.css里的对应样式即可：

/* 未激活状态 */
.untoggled-button {
  background-color: green !important;
  color: white !important;
  border-color: green !important;
  background-image: none !important;
}

/* 激活状态，覆盖所有原生触发选中的规则 */
.untoggled-button.active,
.btn-check:checked + .untoggled-button,
.untoggled-button:active,
.untoggled-button:focus {
  background-color: red !important;
  color: white !important;
  border-color: red !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 可选：自定义hover状态样式 */
.untoggled-button:hover {
  background-color: #006400 !important;
  border-color: #006400 !important;
}
.untoggled-button.active:hover {
  background-color: #8B0000 !important;
  border-color: #8B0000 !important;
}

补充说明 #

如果是多选场景，你当前代码里的单个checked状态无法记录多个按钮的选中情况，可以改为用数组存储选中的value值，配合ToggleButtonGroup的value属性实现受控组件，功能会更稳定。

内容的提问来源于stack exchange，提问作者Michael Ngo