Combining CSS modules with Bootstrap

What would be the best way to combine (custom) CSS modules with Bootstrap within a React component? I'm using the Bootstrap CDN to fetch the styles and use them inside a component. How do I apply custom styles to (for example) .nav-linkusing a CSS module connected to the component? In other words, how do I override Bootstrap's default styling? Suppose the following is my code:

Component

import React from "react";
import styles from "./Navbar.module.css";

function Navbar() {
   return (
      <nav className="navbar navbar-expand-lg">
         <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
               <li className="nav-item">
                  <a className="nav-link" href="#">Home</a>
               </li>
               <li className="nav-item">
                  <a className="nav-link" href="#">About</a>
               </li>
            </ul>
         </div>
      </nav>
   );
}

export default Navbar;

CSS

.Navbar {
   background-color: green;
}

Knowing the import of the css module allows me to use styles.Navbar as a classname, I came up with this in order to make the background color of the navbar green.

<nav className={`navbar navbar-expand-lg ${styles.Navbar}`}>

However, I am unable to catch any bootstrap related classes inside the CSS module. The goal is to get something like this, where I'm able to override Bootstrap within the css module.

.Navbar {
   background-color: green;
}
.Navbar .nav-link {
   color: red;
}