将Bootstrap主题添加到React应用程序中

Question

我有一个带有很多CSS文件的bootstrap主题。它是响应式的，我想要UI元素的所有当前样式。但是，我想将我的应用程序仅作为React组件构建，最有效的方法是什么？如何在React中重新创建引导主题的CSS文件？

Answer 1

有两种方法，

1. 您可以从index.html导入bootstrap.css文件。你知道，好的旧链接属性。

2. 在逐个组件的基础上使用样式。您需要this

   之类的内容

   import React, { Component } from 'react';
   import './Button.css'; // Tell Webpack that Button.js uses these styles
   
   class Button extends Component {
     render() {
       // You can use them as regular CSS styles
       return <div className="Button" />;
     }
   }
   

Answer 2

您可以通过npm / yarn安装Bootstrap：

npm install bootstrap --save

然后你必须在你的顶级React文件（入口点）中导入Bootstrap：

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/css/bootstrap-theme.min.css' // optional
import 'bootstrap/dist/js/bootstrap.min.js'

当然，您需要适当的Webpack规则来转换CSS。