Css Reac引导如何覆盖表单输入背景

我有一个

next.js

应用程序，正在使用

react bootstrap

。我试图从引导用于白色输入的蓝灰色（

8f0fe或rgb（232、240、254）

）覆盖默认表单背景

我目前正在通过一个

custom.bootstrap.scss

文件自定义引导变量

$theme-colors: (
   'primary': #e28215,
   'secondary': #83b8f3,
   'tertiary': #1575e2,
   'headings': #2b363f,
   'body': #5b6b79,
   'inputBorderNormal': #c3ced6,
   'inputBorderFocus': #90a3b0,
   'darkBG': #2b363f,
   'lightBG': #eef0f3,
   'input-bg': #fff,
   'input-bg-disabled': #fff,
);

@import '~bootstrap/scss/bootstrap.scss';

然后将此文件导入my

index.scss

：

@import './custom.bootstrap.scss'

然后我在我的

\u app.js

中使用

index.scss

，如下所示：

import '../style/index.scss';

主题似乎可以工作，因为我的主按钮是橙色的，但我无法更改表单背景（我甚至无法在元素级别用

！important

）覆盖它）

请找到回购协议

谢谢你的帮助

---

干杯

我制作了一个代码沙盒来演示这一点

有两个变化：

1.不要导入

index.scss

而是将自定义引导文件导入

\u app.js

导入“./style/custom.bootstrap.scss”

将变量直接声明到文件中并应用它们

$darkBG: #2b363f;
$primary:#e28215;
$tertiary:  #1575e2;

// ... Rest of your colors..

@import '~bootstrap/scss/bootstrap';

body {
    padding: 20px 20px 60px;
    margin: 0;
    background-color: $primary;
  }

form {
    background-color:$darkBG;
}
.my-3 {
 background-color:$tertiary;
}