将 CSS 模块与 Bootstrap 结合

Question

在 React 组件中将（自定义） CSS 模块与 Bootstrap结合的最佳方式是什么？ 我正在使用 Bootstrap CDN 来获取样式并在组件中使用它们。 如何使用连接到组件的 CSS 模块将自定义样式应用于（例如） .nav-link ？ 换句话说，如何覆盖 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/>单独的<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

Answer 2

例如，导入 bootstrap your-component.js 的组件如下所示：

/* Bootstrap */
import "bootswatch/dist/cosmo/bootstrap.min.css";  

/* Custom Styling */
import './your-override.css';

您可以在导入 bootstrap.css后通过导入 css 文件轻松覆盖，如果您在此文件 (your-override.css) 中添加与 bootstrap 具有相同类名或 id 等的样式，它将被覆盖。

不要使用 !important 。 这真的是不好的做法。