在使用React-bootstrap库时无法应用任何Bootstrap样式

Question

我想在我的React应用程序中使用默认的Bootstrap组件，所以我正在使用React-bootstrap NPM-
package。但是我一开始就坚持：尽管我只是从官方文档中复制非常简单的示例，但我不能使用任何默认组件。每次我使用Bootstrap样式的组件时，都会得到基本的组件样式。例如，下面的代码呈现一个<button>没有样式的样式，而不是<Button bsStyle="danger">Bootstrap 样式。

import React from "react";
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import store from "./store";
import {Button} from 'react-bootstrap';

class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Button bsStyle="danger">Danger</Button>
            </Provider>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('app-container'));

为什么会有这样的问题？也许是关于Babel或Webpack：在包装过程中某些样式被忽略了吗？

Answer 1

当您想使用react-bootstrap组件时，需要在代码中使用bootstrap-css来合并样式。

您可以通过在index.html中添加以下内容来做到这一点

<link rel="stylesheet" type="text/css" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

来自react-bootstrap文档

由于React-
Bootstrap不依赖于Bootstrap的非常精确的版本，因此我们不附带任何附带的CSS。但是，使用这些组件需要一些样式表。包括的方式和引导方式取决于您自己，但是最简单的方法是包括CDN中的最新样式。

DOCS