React Boostrap 4 css module not getting applied to Navbar

Question

I am having trouble trying to change my navbar's color.. Am I missing any steps?

this is the component i am trying to render:

import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';

const Topbar = () => {
    return(
        <Navbar className={styles.mainBar}>
          <Navbar.Brand>Restaurant</Navbar.Brand>
          <Nav.Link>Menu</Nav.Link>
        </Navbar>
    );
}

export default Topbar;

this is the CSS module

.mainBar{
    background-color: rgb(255, 153, 0);
}

this is the dependencies in the package.json i have for the project:

"dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  }

bootstrap is getting applied as i imported to the index.js...

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

score 0 · Answer 1 · answered Jun 04 '21 at 05:00

You are importing a css file into styles but unlike js modules which export functions, objects, etc your css file doesn't export such things. you need to remove styles from your import and just import your css file like this

import './MainMenu.module.css';

And in your className simply mention your class name

<Navbar className="mainBar">

It works fine

React Boostrap 4 css module not getting applied to Navbar

1 Answers1