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

问题描述

我想在我的 React 应用程序中使用默认的 Bootstrap 组件，所以我使用的是 React-bootstrap NPM 包.但我一开始就卡住了:我不能使用任何 默认组件 虽然我是只是从官方文档中复制非常简单的例子.每次我使用 Bootstrap 样式的组件时，我都会得到没有样式的基本组件.例如，下面的代码呈现一个没有样式的 ，而不是来自 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 中添加以下内容来实现

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 文档

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.

文档

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