如何仅在react.js中的一个组件中导入bootsrap [英] How to import bootsrap in just one component in react.js

问题描述

实际上，我是在使用模板的情况下迁移"网站项目的.当我将引导链接放在index.html中时，会有一些冲突.我想将引导程序仅应用到一个组件中以避免这种冲突，但是我不确定如何做到这一点.我对React很陌生.

Actually im "migrating" a website project where i used a template. There are some conflicts when i put the bootstrap link in the index.html. I would like to apply bootstrap just into one component to avoid this conflicts, but im not sure how to do it. Im pretty new with react.

冲突"只是视觉上的，就像导入引导程序会更改行数和列数一样

The "conflicts" are just visual, like if importing bootstrap changes the rows and columns numbers

推荐答案

不幸的是，CSS始终是全局的，因此没有简便的方法可以实现此目的.

Unfortunately CSS is always global, so there's no easy way of doing this.

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

One way however, is to recompile Bootstrap and wrap it in a wrapper class. Then, in your code, setup the wrapper class on a wrapper component and only classes that will be inside that wrapper component will be affected by Bootstrap classes.

执行步骤:(您需要npm才能做到)

Steps to do it : (you'll need npm to do it)

• 下载引导程序源此处
• 解压缩它，进入./scss/bootstrap.scss
• 在所有 @import 上添加一个包装器CSS类，如下所示:

• download bootstrap sources here
• unzip it, go in ./scss/bootstrap.scss
• add a wrapper css class on all @import like so :

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

  /* ... */

  @import "print";
}

• 回到解压缩目录的根目录
• 运行 npm install 和 npm运行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部分将无法完全正常运行，因为它依赖于类，无论如何这还是有点骇人听闻的.

That said, it's pretty sure that the javascript part of bootstrap won't fully work because it relies on classes, this is a bit hacky, anyway.

这篇关于如何仅在react.js中的一个组件中导入bootsrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！