如何在 React.js 的一个组件中仅导入 Bootstrap？

Question

实际上我正在迁移一个使用模板的网站项目。当我将Bootstrap链接放入index.html中时，出现了一些冲突。我想仅将Bootstrap应用于一个组件，以避免这些冲突，但是我不确定如何操作。我在React方面还很新手。

这些“冲突”只是可视化的，例如导入Bootstrap会更改行和列数。

- carlos_luis63

Answer 1

不幸的是，CSS 总是全局的，所以没有简单的方法来解决这个问题。

然而，一种方法是重新编译 Bootstrap 并将其包装在一个包装类中。 然后，在您的代码中，在包装组件上设置包装类，只有位于该包装组件内部的类才会受到 Bootstrap 类的影响。

操作步骤：

（需要使用 npm）

• 下载 Bootstrap 源码 here
• 解压缩它，进入 ./scss/bootstrap.scss 目录
• 在所有的 @import 上添加一个包装 CSS 类，如下所示：

.local-bootstrap {
  @import "function";
  @import "variables";

  /* ... */

  @import "print";
}

• 返回已解压目录的根目录
• 运行 npm install 和 npm run css-compile
• 你本地的 bootstrap 在 ./dist/css/bootstrap.css，它是你可以添加到项目中的文件

然后在你的代码中：

 <div class="local-bootstrap"> /* wrapper component */
   /* inside, the code is affected by your local bootstrap */
   <div class="alert alert-primary" role="alert"/>
 </div>

 /* outside it is not */
 <div>
 </div>

话虽如此，很确定的是 bootstrap 的 javascript 部分不会完全工作，因为它依赖于类(class)，这有点 hacky，无论如何。

- Emmanuel Meric de Bellefon

Answer 2

如果您正在使用SCSS，请在您的SCSS文件中添加以下内容：

.local-bootstrap {
    @import "~bootstrap/scss/bootstrap";
}

在你的组件文件中，确保已经导入了SCSS文件，并将你想要使用Bootstrap的代码放在一个带有local-bootstrap类的div中（参见示例）。

示例：

import React from 'react';
import '<PATH TO SCSS FILE>';

const Example = () => {
  return (
    <div className='local-bootstrap'>
      CODE YOU WANT TO USE BOOTSTRAP
    </div>
  );
};

- jkenyon

Answer 3

您可以使用reactstrap，将所需内容导入到组件文件中，其余的则保持不变。

示例：

import React from 'react';
import { Button } from 'reactstrap';

export default (props) => {
  return (
    <Button color="danger">Danger!</Button>
  );
};

使用：

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

如果您不想在app.js或整个网站中使用，可以将Bootstrap的CSS导入到特定组件中。

- brooksrelyt