Question

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

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

Answer 1

您可以使用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，则可以将其导入到该特定组件中。

Answer 2

不幸的是，CSS始终是全局的，因此没有简便的方法。

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

执行步骤：（您需要npm才能做到）

下载引导程序资源here
解压缩它，进入./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部分将无法完全正常运行，因为它依赖于类，无论如何这还是有点骇人听闻的。

如何仅在react.js中的一个组件中导入bootsrap

2 个答案: