I've been working on a simple React application and for that I need the Bootstrap library. So at first, I imported it at the top of the index.js file.
index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
import '@fortawesome/fontawesome-free/css/solid.min.css';
import App from './App';
Then I created a CSS module file and tried to override a default nav-link style:
Menu.module.css:
.language {
background: transparent;
border: none;
cursor: pointer;
}
Menu.js:
import styles from './Menu.module.css';
...
<li className="nav-item">
<button className={`nav-link mr-3 h5 ${styles.language}`} onClick={() => doSomething()}>
<i aria-hidden="true" className="fas fa-exchange-alt"/> {locale.language}
</button>
</li>
As you see below, my styles are overridden by the defaults. So completely the opposite happens.
The problem is pretty straightforward. I could add the important modifier or create a seperate css file (without modularization) and override these rules. To be honest, these look like a workaround and not a real solution. So what is recommended way to override the default Bootstrap styling in a React component?