5

我的 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;

结果是什么样的

4

2 回答 2

11

我将以下行添加到我的 index.html 并且它有效。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
于 2016-03-15T20:16:39.490 回答
2

其实不需要直接从CDN导入,最好从本地dist文件夹导入css,保证版本一致。

将此添加到您的 index.js / index.tsx 在您的其他导入下方:

import 'bootstrap/dist/css/bootstrap.min.css';
于 2020-06-11T08:11:27.460 回答