Custom styling with scss for react-bootstrap

Question

I'm building a React app using react-bootstrap. I want to customize react-bootstrap components how can I achieve this?

I followed a short tutorial on the create react app page and was able to override the default variables like primary, secondary etc. I have imported the bootstrap.scss end of the file as well.

className = "btn-primary btn-sm"

<Button variant="primary" size="sm">
        Primary
 </Button>

.btn-primary {
  background-color: $primary;
  width: 40px;


  &:hover {
    background-color: var(--color-white);
    border: var(--btn-primary-border);

    span {
      color: $primary;
    }
  }

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

I expected my above styles to be applied but it's not applying. Only the background color is applied.

If anyone still looking for an answer this is what I did and it's working for me.

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "your custom.css" here

This will override the bootstrap styles

Answer 1

It basically boils down to the following steps:

1. Download bootstrap using npm install react-bootstrap
2. Install SASS pre-processor (https://sass-lang.com/install)
3. Create a scss file for overriding bootstrap's _variables.scss (make sure the path to _functions.scss, _variables.scss, _mixins.scss and bootstrap.scss is correct)

/* stylesheet.scss */

@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

/* Your customizations here */

$theme-colors: (
  primary: red;
);

@import "bootstrap";

4. Transpile your stylesheet.scss to stylesheet.css and add a reference to your head section like so: <link rel="stylesheet" href="stylesheet.css">

Here are some links that should help you get started:

1. How to customize bootstrap
2. Theming Bootstrap

Answer 2

For bootstrap variables override:

// Override Bootstrap Variables.
// For example: $grid-gutter-width-base:  20px;
// For example: $grid-gutter-width: 20px;

@import "bootstrap-overrides";

//Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

For custom styling at a component: you will need to import bootstrap at the beginning of the file

// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";

and after that, you can apply your styling.