在使用React-bootstrap库时无法应用任何Bootstrap样式 [英] Cannot apply any Bootstrap style in using React-bootstrap library

问题描述

我想在我的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的非常精确的版本，所以我们不附带任何包含的CSS但是，使用这些组件需要一些
样式表。你包含的
引导程序样式由你决定，但最简单的方法是
包括CDN的最新样式。

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

DOCS

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