Question

0

178

Views

Bootstrap + react-bootstrap form elements, styling not applied

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T06:48:44.583Z

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.