如何移除react-bootstrap的ToggleButtonGroup内ToggleButton的单选图标？

react-bootstrap 2.x的ToggleButton内部默认渲染了原生的input[type=radio]元素，正常情况下bootstrap的样式会把这个元素设为不可见，如果样式缺失或者被其他样式覆盖，就会出现单选图标。你可以通过以下方案解决，原有组件的互斥选中特性完全不受影响：

• 方案一：确认基础样式引入
  首先检查你项目的入口文件是否正确引入了bootstrap的全局样式，react-bootstrap的组件样式依赖原生bootstrap的样式文件：

// 入口文件（如index.tsx / index.js）
import 'bootstrap/dist/css/bootstrap.min.css'

如果确认已经引入样式还是显示单选图标，用下面的CSS方案覆盖即可。

• 方案二：全局样式覆盖
  在你的全局CSS文件中加入如下代码，直接隐藏所有ToggleButton内部的原生选择框：

.btn-check {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

• 方案三：局部样式覆盖
  如果不想影响其他地方的ToggleButton使用，可以给当前的ToggleButtonGroup添加自定义类名，仅针对当前组件隐藏图标：
  首先给组件添加自定义类名：

<ToggleButtonGroup
  className="hide-radio-icon"
  name="radio"
  size="sm"
  onChange={this.setVal}
  value={this.state.val ? 1 : 0}
>
  {/* 原有内容保持不变 */}
</ToggleButtonGroup>

然后添加对应CSS样式：

.hide-radio-icon .btn-check {
  display: none;
}

以上方案都不需要修改原有组件的交互逻辑，也不用换成ButtonGroup手动实现互斥选中效果。

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