CODEWITHSUNDEEP
reactjsreact-bootstrapbootstrap-5
Asdf1234567
Asdf1234567

Reputation: 550

Custom css styles in react-bootstrap not working

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:

file structure

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:

Form UI

Upvotes: 1

Views: 1540

Answers (2)

Asdf1234567
Asdf1234567

Reputation: 550

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

Thank you

Upvotes: 0

salik saleem
salik saleem

Reputation: 847

It basically boils down to the following steps:

Download bootstrap using npm install react-bootstrap

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

  2. 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";

  3. 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

Upvotes: 1

Related Questions