我想内联使用引导类和 next.js 模块答案

【问题标题】：I want to use bootstrap class and next.js modules together inline我想内联使用引导类和 next.js 模块
【发布时间】：2021-03-07 05:04:52
【问题描述】：

我想在 next.js 模块中一起使用引导类和我的定义。我该怎么做？

【问题讨论】：

标签： reactjs twitter-bootstrap next.js

【解决方案1】：

在页面/_app.js 中

Head Tag 并将所有引导程序插入其中：

  <Head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  </Head>

然后在任何组件中，一旦您导入了 Name.module.css，例如：

从'../styles/Navbar.module.css'导入样式；

现在你可以像这样将自制的 CSS 类与 Bootstrap 类结合起来：

<div className={`${styles.redBorder} bg-dark`}></div>

注意：你不能在类名中使用破折号，所以这不起作用：

.red-border;

这不适用于 next.js

改为使用 CamelCase。

.redBorder;

然后就可以了。

【讨论】：

【解决方案2】：

首先，将.header-top 中的header.module.scss 重命名为.headerTop。

然后，包括你的班级名称：

<div className={`${styles.headerTop} container d-flex ...`}>

说明：CSS modules 中的类名会被自动处理以使其唯一，以确保范围界定。例如，.headerTop 将变为类似于.header_headerTop__JnCx9 (.fileName_className_randomString)。因此，在组件中，您需要将类名包含为 JavaScript 表达式而不是字符串。也就是说，如果你有一个类名，你会这样做：<div className={styles.headerTop}></div>。但是在您的情况下，您希望在引导类（不是 CSS 模块）中包含您自己的类名。一种方法是使用Template literals，它允许在字符串中包含表达式。

【讨论】：

【解决方案3】：

您需要先安装引导程序。

npm install --save bootstrap

您只能在 NextJS 中的一个位置导入 css。

创建 pages/_app.js 并导入 css 文件。

import 'bootstrap/dist/css/bootstrap.min.css';

【讨论】：