Html 将CSS模块与引导相结合

在React组件中，将（自定义）CSS模块与引导相结合的最佳方式是什么？我使用引导CDN获取样式并在组件中使用它们。如何使用连接到组件的CSS模块将自定义样式应用于（例如）

.nav link

？换句话说，如何覆盖引导的默认样式？假设以下是我的代码：

组成部分

从“React”导入React；
从“/Navbar.module.css”导入样式；
函数Navbar（）{
返回(






);
}
导出默认导航栏；

CSS

.Navbar{
背景颜色：绿色；
}

---

知道css模块的导入允许我使用

styles.Navbar

作为类名，我想出了这个方法，以使Navbar的背景色变为绿色

但是，我无法捕获CSS模块中任何与引导相关的类。目标是得到类似这样的东西，在这里我能够覆盖css模块内的引导

.Navbar{
背景颜色：绿色；
}
.Navbar.nav链接{
颜色：红色；
}

我的意见是，当涉及css模块和React组件方法时，通常应该避免使用后代选择器

.class1.class2

。我宁愿简单地创建一个

.navigationLink

类，并将其直接应用于

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

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

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

在导入bootstrap.css之后，如果您在此文件（您的override.css）中添加与bootstrap具有相同类名或id等的样式，则可以通过导入css文件轻松地进行覆盖。它将覆盖

请勿使用！重要信息。这是一种非常糟糕的做法。
为什么不直接覆盖引导类呢
.navbar{背景色：绿色！重要}