Bootstrap + react-bootstrap 表单元素，未应用样式答案

【问题标题】：Bootstrap + react-bootstrap form elements, styling not appliedBootstrap + react-bootstrap 表单元素，未应用样式
【发布时间】：2025-12-10 11:00:02
【问题描述】：

我正在使用 bootstrap + react-bootstrap，但我真的不明白为什么我的自定义主题不适用于表单元素。

主题已正确应用于具有 btn-primary 样式的按钮，并且我认为它在其他引导元素上也是相同的？

在这里您可以看到元素仍然具有默认引导样式与按钮：https://imgur.com/a/0kJZdjt

我的 index.scss（使用 create-react 应用程序生成的应用程序库）：https://pastebin.com/5nrWickD

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

我的 JSX：https://pastebin.com/jvp9cwyz

<Form.Check type={'switch'}
    className={'form-switch'}
    disabled={!v.state.reachable}
    defaultChecked={v.state.on}
    onChange={({ target }) => {
      lightArray[idx].state.on = target.checked;
      setLightArray([...lightArray]);
      turnLightOnOrOff(idx + 1, target.checked);
    }
}/>

我有什么遗漏吗？我必须向表单元素添加类吗？我环顾四周，但找不到任何东西

【问题讨论】：

标签： javascript css reactjs react-bootstrap

【解决方案1】：

好吧，事实证明这并不像设置 theme-colors 变量那么简单。

我还必须设置其他变量，像这样

$theme-colors: (
  "primary": #86CB92,
  "secondary": #8f0000,
  "success": #71B48D,
  "info": #251F47,
  "warning": #251F47,
  "danger": #E87461,
  "light": #D8B4E2,
  "dark": #000000
);

$primary: map-get($theme-colors, primary);
$input-focus-border-color: $primary;

@import "~bootstrap/scss/bootstrap";

现在表单元素有了正确的样式。

【讨论】：