Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to override Bootstrap theme colors in bootstrapped react/redux app?

probably a newbie questions (starting with REACT) but I am unable to change the theme colors in my newly bootstrapped react application.

I read some answers but unfortunately, they did not work for me.

I have the following entry point:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import './styles/app.scss';

ReactDOM.render(<App />, document.getElementById('app'));

and I have app.scss style sheet in src/styles:

@import '_settings.scss';
@import '_base.scss';
@import './components/_header.scss';

I tried changing the theme colors here but it doesn't seem to do anything:

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
  "primary": #991196,
  "danger": #ff4136
);

Could someone point out to me how this works since all the answers and tuturials I came across seem to be using different approaches.

I am using the following version of Bootstrap:

"bootstrap": "^4.0.0"
like image 894
Smajl Avatar asked Aug 20 '18 10:08

Smajl


People also ask

How do I change Bootstrap color in React?

To customize Bootstrap, create a file called src/custom. scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables.

How do I override Bootstrap defaults?

You can override the default styles of Bootstrap elements using two possible methods. The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap. The second — using Sass variables — applies to sites using the source code version of Bootstrap.


2 Answers

First refer this, Bootstrap webpack

This is one way of using bootstrap in reactjs projects.

You are importing compiled version of bootstrap css by doing this

import 'bootstrap/dist/css/bootstrap.min.css'; //Dont do this

Instead you should do this

In your app.scss file,

first define your color

$primary: #13C7CD;
$danger: #red;

then

import scss version of bootstrap

@import '~bootstrap/scss/bootstrap';

~ means webpack will search for it in node_modules

After this import the app.scss file in your main js file(can be index.js or app.js)

import './styles/app.scss';

How this works

When you define your color variables before importing bootstrap scss, the resulting complied css will have your color values

like image 121
Gautam Naik Avatar answered Sep 23 '22 15:09

Gautam Naik


You can make the overrides and import Bootstrap entirely in the app.scss file. It's important the Bootstrap is imported after the theme color changes to override the !default theme-colors defined in bootstrap _variables.scss.

    @import '_settings.scss';
    @import '_base.scss';
    @import './components/_header.scss';

    /* import only the Bootstrap files needed for customizations */
    @import "node_modules/bootstrap/scss/functions";
    @import "node_modules/bootstrap/scss/variables";

    /* make the customizations */
    $theme-colors: (
      "primary": #991196,
      "danger": #ff4136
    );

    /* import bootstrap to set changes */
    @import "node_modules/bootstrap/scss";

When the react app is built and the SASS is compiled then generated CSS will contain your customizations and Bootstrap so that you won't need to separately import bootstrap in react.

Demo: https://www.codeply.com/go/Tho2TEwoI1

like image 35
Zim Avatar answered Sep 21 '22 15:09

Zim