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

Source: CSS – Stack Overflow

November 20, 2021
Category : News
Tags: css | javascript | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.