Bootstrap + react-bootstrap 自定义主题未对表单元素生效如何解决

仅自定义$theme-colors变量无法覆盖表单组件的配色配置，Bootstrap的开关、输入框等表单类组件有独立的Sass变量控制样式，不会自动继承$theme-colors内的主题值；而按钮类组件默认关联$theme-colors变量，因此会出现按钮样式生效、表单样式不生效的差异。

• 第一步：在index.scss导入Bootstrap样式前，追加表单相关变量的自定义配置，示例如下：

$theme-colors: (
  primary: #86CB92,
  secondary: #404E7C,
  success: #71B48D,
  info: #251F47,
  warning: #251F47,
  danger: #E87461,
  light: #D8B4E2,
  dark: #260F26
);

// 新增表单组件配色覆盖配置
$form-check-input-checked-bg-color: map-get($theme-colors, primary);
$form-check-input-checked-border-color: map-get($theme-colors, primary);
$form-switch-checked-bg-color: map-get($theme-colors, primary);
// 若需要同步修改输入框聚焦样式，可追加以下两行配置
$input-focus-border-color: map-get($theme-colors, primary);
$input-focus-box-shadow: 0 0 0 0.25rem rgba(map-get($theme-colors, primary), 0.25);

// 最后导入Bootstrap样式
@import "~bootstrap/scss/bootstrap";

• 第二步：现有JSX代码无需额外添加类名，你手动写的className={'form-switch'}属于冗余配置，Form.Check组件设置type="switch"后会自动生成该类，直接删除即可。

修改完成后重启开发服务，表单开关的选中样式就会和btn-primary按钮的主题色保持一致。

内容的提问来源于stack exchange，提问作者G. Annell