我想在我的React应用程序中使用默认的Bootstrap组件,所以我正在使用React-bootstrap NPM- package。但是我一开始就坚持:尽管我只是从官方文档中复制非常简单的示例,但我不能使用任何默认组件。每次我使用Bootstrap样式的组件时,都会得到基本的组件样式。例如,下面的代码呈现一个<button>没有样式的样式,而不是<Button bsStyle="danger">Bootstrap 样式。
<button>
<Button bsStyle="danger">
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:在包装过程中某些样式被忽略了吗?
当您想使用react-bootstrap组件时,需要在代码中使用bootstrap-css来合并样式。
您可以通过在index.html中添加以下内容来做到这一点
<link rel="stylesheet" type="text/css" href=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
来自react-bootstrap文档
由于React- Bootstrap不依赖于Bootstrap的非常精确的版本,因此我们不附带任何附带的CSS。但是,使用这些组件需要一些样式表。包括的方式和引导方式取决于您自己,但是最简单的方法是包括CDN中的最新样式。
DOCS