React Bootstrap Form.Check异常显示为文本输入框而非复选框

按出现概率从高到低排查以下问题即可解决：

• 依赖版本不匹配
  React Bootstrap 和原生 Bootstrap 存在严格的大版本对应关系，跨版本混用会导致组件内部属性映射失效，且不会抛出控制台错误：React Bootstrap 1.x 必须搭配 Bootstrap 4.x 使用，React Bootstrap 2.x 必须搭配 Bootstrap 5.x 使用。版本错配时Form.Check无法识别复选框渲染逻辑，会默认回退为普通text类型输入框。
  排查命令：
  npm list react-bootstrap bootstrap
  修复方式：安装对应匹配的版本即可，例：
  npm install react-bootstrap@2 bootstrap@5
• 组件属性配置错误
  漏写type="checkbox"必填属性、属性值拼写错误，或者错误传入as属性覆盖默认渲染逻辑，都会导致组件渲染异常。注意不要复制示例时遗漏type声明，也不要随意给Form.Check传入as="input"这类覆盖默认标签行为的属性。
  正确基础用法参考：

  import { Form } from 'react-bootstrap';
  
  export default function CheckboxDemo() {
    return (
      <Form>
        <Form.Check
          type="checkbox"
          id="agreement-check"
          label="同意用户协议"
        />
      </Form>
    )
  }
  

• 样式冲突或引入顺序错误
  虽然已经引入Bootstrap CSS，但如果存在以下情况仍会导致样式异常：
  1. Bootstrap CSS引入顺序在其他UI库样式、自定义全局样式之后，被后续规则覆盖
  2. 全局CSS或第三方UI库重置了input的appearance属性，且未配套复选框的自定义样式
     排查方式：打开浏览器开发者工具，选中异常渲染的输入框：如果标签上type属性值为text，属于前两类配置/版本问题；如果type属性值为checkbox但视觉表现为文本框，直接在样式面板找到冲突的覆盖规则删除，同时调整CSS引入顺序，将import 'bootstrap/dist/css/bootstrap.min.css'放在项目所有样式引入的最顶部。
• 嵌套结构错误
  不要将Form.Control作为自定义子元素传入Form.Check，会直接覆盖组件默认的复选框渲染逻辑，输出普通文本输入框。非必要不要手动覆盖Form.Check的默认children结构。

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