在使用 React-bootstrap 库时无法应用任何 Bootstrap 样式

Posted 2023-03-06

【中文标题】在使用 React-bootstrap 库时无法应用任何 Bootstrap 样式

【英文标题】：Cannot apply any Bootstrap style in using React-bootstrap library

【发布时间】：2017-04-08 15:06:00

【问题描述】：

我想在我的 React 应用程序中使用默认的 Bootstrap 组件，所以我使用了 React-bootstrap NPM-package。但我一开始就坚持：我不能使用任何default component，尽管我只是从官方文档中复制非常简单的例子。每次我使用 Bootstrap 样式的组件时，我都会得到没有样式的基本组件。例如，下面的代码呈现一个没有样式的 <button>，而不是来自 Bootstrap 的 <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：一些样式在打包过程中被忽略了？

【问题讨论】：

你导入了 bootstrap css 吗？

是的，这就是问题所在。我没有包含 Bootstrap CSS <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

这样就解决了？

@LucasKatayama 是的。

【参考方案1】：

当你想使用 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

【讨论】：

但这有点奇怪。因为我使用的是打包程序，所以在我的index.html 中我只包含一种样式：<link rel="stylesheet" type="text/css" href="style.css"/>，尽管我写了很多.css 文件。为什么 Bootstrap 样式不包含在包中？

您使用哪个打包程序。据我所知，我包含了我编写的所有 css 文件，另一种方法是在 webpack 中指定一个 css-loader，这样我们就可以在所需组件中要求相关文件

我正在使用 Webpack 和 Babel。