在 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;
.Navbar {
background-color: green;
}
知道 css 模块的导入允许我用作styles.Navbar类名，我想出这个是为了使导航栏的背景颜色为绿色。
<nav className={`navbar navbar-expand-lg ${styles.Navbar}`}>
但是，我无法捕获 CSS …
虽然标题解释了我的大多数问题,但您可能需要一些背景信息.我已经开发了一段时间的网站了.该网站上有3个按钮在不同颜色的每个部分.现在,是否有更有效的方法来执行以下操作:
/* Button 1 */
#button1 {
display: inline;
margin-left: 26px;
color: orangered;
border: 3px solid orangered;
box-sizing: border-box;
padding: 7px 30px 7px 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#button1:hover {
background-color: orangered;
color: white;
}
/* Button 2 */
#button2 {
display: inline;
margin-left: 26px;
color: dodgerblue;
border: 3px solid dodgerblue;
box-sizing: border-box;
padding: 7px 30px 7px 30px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#button2:hover {
background-color: dodgerblue;
color: white; …