问题描述
我想在我的 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 的最新样式.
这篇关于无法在使用 React-bootstrap 库时应用任何 Bootstrap 样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!