Create React App 添加 Bootstrap

你不必将 reactstrap 与 React 一起使用，但它是一个用于集成 Bootstrap 和 React 应用程序的流行库。 如果需要，可以按照以下步骤将其与 Create React App 集成：

从 npm 安装 reactstrap 和 Bootstrap 。 reactstrap 不包括 Bootstrap CSS 所以这也需要安装：

npm install --save reactstrap bootstrap@4

或者你可以使用 yarn:

yarn add bootstrap@4 reactstrap

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS ：

import 'bootstrap/dist/css/bootstrap.css';
// 在下面放置任何其他导入，
// 以便组件中的CSS优先于默认样式。

在 src/App.js 文件或自定义组件文件中导入所需的 reactstrap 组件：

import { Button } from 'reactstrap';

现在，你已准备好在 render 方法中定义的组件层次结构中使用导入的 reactstrap 组件。 这是使用 reactstrap 重构的 App.js 的示例。

使用自定义主题

注意：此功能适用于 react-scripts@2.0.0 及更高版本。

有时你可能需要调整 Bootstrap（或等效包）的视觉样式。
从 react-scripts@2.0.0 开始，你可以导入 .scss 文件。 这使得可以将包的内置 Sass 变量用于全局样式首选项。

要自定义 Bootstrap ，请创建一个名为 src/custom.scss（或类似文件）的文件，然后导入 Bootstrap 源样式文件。 在导入的文件 之前 添加一些覆盖样式。 你可以参考 Bootstrap的文档 以获取可用变量的名称。

// 在导入之前覆盖默认变量
$body-bg: #000;

// 导入 Bootstrap 及其默认变量
@import '~bootstrap/scss/bootstrap.scss';

注意： 你必须在 node_modules 之前添加 ~ 前缀，如上所示。

最后，导入新创建的 .scss 文件，而不是 src/index.js 文件开头的默认 Bootstrap .css，例如：

import './custom.scss';