添加 Bootstrap

虽然您不必使用任何特定库来将 Bootstrap 与 React 应用集成，但它通常比尝试包装 Bootstrap jQuery 插件更容易。 React Bootstrap 是最受欢迎的选择，它努力与 Bootstrap 完全一致。 reactstrap 也是一个不错的选择，适合那些希望以牺牲一些功能为代价来获得更小构建的项目。

每个项目的相应文档站点都提供了有关安装和使用它们的详细说明。两者都依赖于 Bootstrap css 文件，因此也请安装它

npm install bootstrap

或者，您可以使用yarn

yarn add bootstrap

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

import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

使用自定义主题

注意：此功能在[email protected]及更高版本中可用。

有时您可能需要调整 Bootstrap（或等效包）的视觉样式。

从[email protected]开始，您可以导入.scss文件。这使得可以使用包的内置 Sass 变量进行全局样式偏好设置。

要在 Create React App 中启用scss，您需要安装sass。

npm install sass

或者，您可以使用yarn

yarn add sass

要自定义 Bootstrap，创建一个名为src/custom.scss（或类似名称）的文件，并导入 Bootstrap 源样式表。在导入的文件之前添加任何覆盖。您可以参考Bootstrap 文档以了解可用变量的名称。

// Override default variables before the import
$body-bg: #000;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

注意：您可以使用~作为前缀，如上所示，以从node_modules解析模块。

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

import './custom.scss';