将 CSS 模块与 Bootstrap 相结合

Question

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

成分

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

.class1 .class2我的观点是，当涉及到 css 模块和 React 组件方法时，你通常应该避免使用后代选择器。我宁愿简单地创建一个.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