将CSS模块与Bootstrap结合

Question

React组件中（自定义）带有Bootstrap的CSS模块的最佳方法是什么？我正在使用Bootstrap CDN来获取样式并在组件内部使用它们。如何应用自定义样式到（例如）.nav-link 使用CSS模块连接到组件的方法？换句话说，如何覆盖Bootstrap的默认样式？假设以下是我的代码：

组件

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;
}

 
知道css模块的导入后，我可以使用styles.Navbar作为类名，所以我想出了这一点，以便使导航栏的背景颜色变为绿色。
<nav className={`navbar navbar-expand-lg ${styles.Navbar}`}>

但是，我无法在CSS模块中捕获任何与引导程序相关的类。我们的目标是得到这样的东西，在这里我可以在css模块中覆盖Bootstrap。
.Navbar {
   background-color: green;
}
.Navbar .nav-link {
   color: red;
}

Answer 1

我的观点是，在使用CSS模块和React组件方法时，通常应该避免使用后代选择器.class1 .class2。我宁愿简单地创建一个.navigationLink类并将其直接应用于<a> </a>元素。然后，您可以将其设为单独的<NavigationLink/>组件以实现可重用性。

另一种方法是使用Bootstrap主题来全局更改链接颜色之类的东西：

https://getbootstrap.com/docs/4.1/getting-started/theming/https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L35