How to override Bootstrap styles using CSS-modules in Create React App

Question

I use Create React App with embedded CSS-modules, and installed Bootstrap library. There is an example code:

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.css';

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

App.jsx

import React from 'react';
import styles from './style.module.css';

const App = () => (
  <nav className={`navbar fixed-top ${styles.navbar}`}>test</nav>
);

export default App;

style.module.css

.navbar {
  background: #fff;
  height: 100px;
  padding: 1.5rem 0;
  box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}

But as a result the styles from Bootstrap erase my styles: wrong styles

How can I change this behavior?

Answer 1

This is happening due to the order at which React adds the styles to your page.

App is a child component in your index.js page, so it's styles will be applied first. Then as React moves up to the parent level of index.js, it will then apply the bootstrap styles to the page. Since both the bootstrap styles and your styles are of equal specificity, the bootstrap styles will take priority.

The easiest solution would be to increase the specificity of your custom classes that conflict styles with Bootstrap styles. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

You may also be able to import the Bootstrap styles in your App component before importing your CSS modules.