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

问题描述

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

I want to use default Bootstrap components in my React application, so I'm using React-bootstrap NPM-package. But I stuck at the very beginning: I cannot use any default component although I'm just copying very simple exmaples from official docs. Every time I use Bootstrap-styled component, I get basic component withouts styles. For example the code below renders a <button> without styles, not <Button bsStyle="danger"> from 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：在打包过程中会忽略一些样式？

Why do I have such a problem? Maybe it's about Babel or Webpack: some styles are being ignored during the packaging?

推荐答案

当你想使用react-bootstrap组件时你需要在你的代码中使用bootstrap-css以包含样式。

When you want to use react-bootstrap component you need use the bootstrap-css in your code in order to encorporate the styles.

你可以通过在index.html中添加follwowing来实现这一点

You can do this by adding the follwowing in your index.html

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

来自react-bootstrap docs

From the react-bootstrap docs

这篇关于在使用React-bootstrap库时无法应用任何Bootstrap样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！