将 CSS 模块与 Bootstrap 相结合

Posted 2023-03-05

【中文标题】将 CSS 模块与 Bootstrap 相结合

【英文标题】：Combining CSS modules with Bootstrap

【发布时间】：2020-04-29 10:50:09

【问题描述】：

在 React 组件中结合（自定义）CSS 模块与 Bootstrap 的最佳方式是什么？我正在使用 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;

【问题讨论】：

为什么不直接覆盖引导类？ .navbar background-color: green !important

【参考方案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

【参考方案2】：

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

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

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

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

请勿使用 !important。这真是糟糕的做法。