Reac-Bootstrap how to overwrite form-input background - css

Question

I've got a next.js application and am using react-bootstrap. I am trying to overwrite my default form background from that blueish gray (#e8f0fe or rgb(232, 240, 254)) that bootstrap is using for inputs to white.
I am currently customizing the bootstrap variables via a custom.bootstrap.scss file
$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';
this file is then imported into my index.scss:
#import './custom.bootstrap.scss'
I am then using the index.scss in my _app.js like this:
import '../style/index.scss';
The theming seems to work as my primary button is orange, but I can't get the form background to change (I can't even overwrite it on element level with !important)
Please find a repo here
Any help appreciated.
Cheers

Answer 1

I have made a code sandbox to demonstrate this
https://codesandbox.io/s/sparkling-feather-ppg8q?file=/style/custom.bootstrap.scss
There were two changes:
1.instead of importing index.scss import the custom bootstrap file into _app.js
import "../style/custom.bootstrap.scss";
Declare the variables directly into the file and apply them.
$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;
}