I'm using bootstrap + react-bootstrap, and I don't really understand why my custom theming isn't applied on form elements.
The theming is correctly applied to my button that has btn-primary style, and I assumed it would be the same on other bootstrap elements?
Here you can see that the elements still have the default bootstrap style vs the button: https://imgur.com/a/0kJZdjt
My index.scss (app base generated with create-react app): 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";
My 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);
}
}/>
Is there something I am missing? Do I have to add classes to the form elements? I have looked around but can't find anything
Well, turns out it's not as easy as just setting the theme-colors variable.
I had to set other variables as well, like this
$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";
And now the form element have the right styles.