在 React 的类名中添加 Bootstrap CSS 和 CSS 模块答案

【问题标题】：Adding Bootstrap CSS along with CSS Module in classname in React在 React 的类名中添加 Bootstrap CSS 和 CSS 模块
【发布时间】：2021-03-16 00:23:18
【问题描述】：

我想将按钮的 react js 引导类与按钮的 css 模块中的定位 css 结合起来，但无法将两者结合起来工作。

<button className= {'btn btn-primary ${styles.bottomButton}} onClick={(e) => logout(e)}>

【问题讨论】：

标签： css reactjs react-css-modules

【解决方案1】：

得到它使用

【讨论】：

【解决方案2】：

如果您想轻松应用样式，可以使用patch-styles 包。有关更高级的用法，请参阅StackBlitz 中的示例。它引入了一种更具声明性的方式来应用样式；您需要使用<PatchStyles classNames={styles}> 包装您的代码，其中styles 是默认导入样式模块。有了所有你可以写的：

<PatchStyles classNames={styles}>
  <button className="btn btn-primary bottomButton" onClick={(e) => logout(e)}>...</button>
</PatchStyles>

【讨论】：

【解决方案3】：

您可以使用 ES2015 中引入的backticks。

className={`btn btn-primary ${styles.bottomButton}`}

【讨论】：

【解决方案4】：

首先，您需要像这样导入 CSS 文件：

import classes from "./Navbar.module.css";

然后，您可以通过以下方式使用它（使用模板文字或反引号）：

className={`navbar navbar-expand-lg navbar-light bg-light ${classes.mainnavbar}`}

【讨论】：