不幸的是，CSS 始终是全局的，因此没有简单的方法可以做到这一点。

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

步骤：（你需要 npm 来做到这一点）

• 在此处下载引导程序源
• 解压，进入./scss/bootstrap.scss
• @import像这样添加一个包装器 css 类：

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

  /* ... */

  @import "print";
}

• 回到解压目录的根目录
• 运行npm install和npm run css-compile
• 您的本地引导程序位于 ./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 部分不会完全工作，因为它依赖于类，无论如何这有点 hacky。

您可以使用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 或站点范围内使用 Bootstraps CSS，则可以将 Bootstraps CSS 导入到该特定组件中。