react-bootstrap不包含css

Question

我的jsx文件成功地识别了react-bootstrap元素，但是没有对它们进行样式设置。我的项目的node-modules文件夹包含了react-bootstrap和bootstrap。为什么会发生这种情况？

var React = require('react');
var Button = require('react-bootstrap').Button;
var Jumbotron = require('react-bootstrap').Jumbotron;

var ReactComponentHi = React.createClass({displayName: 'Hi',

    render: function() {
        return (
            <div>
                <Button bsStyle='success'>
                    clickk
                </Button>
                <Jumbotron>
                    <h1>Hello, world!</h1>
                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <p><Button bsStyle='primary'>Learn more</Button></p>
                </Jumbotron>
            </div>

        );
    }
});

module.exports = ReactComponentHi;

​

​

Answer 1

我将下面这行代码添加到我的index.html中，它可以正常工作。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Answer 2

实际上，不需要直接从CDN导入，最好从本地dist文件夹导入css，以确保版本一致。

将其添加到其他导入下面的index.js / index.tsx中：

import 'bootstrap/dist/css/bootstrap.min.css';