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

Question

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

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