Custom css styles in react-bootstrap not working

Question

Why is my custom css styles not working with react-bootstrap? I use npx create-react-app, node-sass and npm i react-bootstrap. What Am i missing?

Thanks!

Here is my sample files:

index.js code:

import "bootstrap/dist/css/bootstrap.min.css";



/*import here*/

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

custom scss

 body {
  background: #0b739c;
}

.login-form {
  background: white;

  h1 {
    /*styles here*/
  }

  form {
    input {
      background: #ffffff;
      border: 1px solid #dcdcdc;
      box-sizing: border-box;
      border-radius: 40px;
    }
  }
}

login.js code

import "./Login.module.scss";
/*code here*/

    const Login = () => {
      return (
        <Container fluid>
          <Row>
            <Col>
              <Image src={LoginImage} alt="login image" />
              <h2>Bring all your friends to any network!</h2>
            </Col>
            <Col className="m-0 login-form">
              /*form code here*/
            </Col>
          </Row>
        </Container>
      );
    };
    
    export default Login;

Sample output, custom styles not reflecting:

salik saleem · Accepted Answer · 2021-11-22 10:43:41Z

1

It basically boils down to the following steps:

Download bootstrap using npm install react-bootstrap

Install SASS pre-processor (https://sass-lang.com/install)

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

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

/* Your customizations here */

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

@import "bootstrap";

Transpile your stylesheet.scss to stylesheet.css and add a reference to your head section like so: https://uxplanet.org/how-to-customize-bootstrap-b8078a011203

answered Nov 22, 2021 at 10:43

salik saleem

8677 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asdf1234567 · Accepted Answer · 2021-11-25 02:04:23Z

0

I solve the issue instead on Login.module.scss, change to the file to Login.scss and it works fine.

Thank you

answered Nov 25, 2021 at 2:04

Asdf1234567

5802 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Custom css styles in react-bootstrap not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related