Search code examples
reactjsreact-bootstrapbootstrap-5

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

Solution

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

    Thank you