2

实际上我正在“迁移”一个我使用模板的网站项目。当我将引导链接放在 index.html 中时，会出现一些冲突。我想将引导程序应用到一个组件中以避免这种冲突，但我不知道该怎么做。我对反应很新。

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

4

2 回答 2

3

不幸的是，CSS 总是全局的，所以没有简单的方法可以做到这一点。

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

步骤：（你需要 npm 来做）

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

也就是说，很确定引导程序的 javascript 部分不会完全工作，因为它依赖于类，无论如何，这有点 hacky。

于 2019-12-11T20:24:39.707 回答
0

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

于 2019-12-11T19:50:27.773 回答