reactjs - 如何在 react.js 中仅在一个组件中导入 Bootstrap

Question

实际上，我正在“迁移”一个我使用模板的网站项目。当我把 bootstrap 链接放在 index.html 中时有一些冲突。我想将 bootstrap 应用到一个组件中以避免这种冲突，但我不确定该怎么做。我对 React 很陌生。

“冲突”只是视觉上的，就像导入 bootstrap 会改变行数和列数一样

Answer 1

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

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

操作步骤:(你需要 npm 来做)

• 下载引导源 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 部分不会完全工作，因为它依赖于类，无论如何，这有点 hacky。