react-bootstrap <Button> 无法正常工作答案

【问题标题】：react-bootstrap <Button> not working properlyreact-bootstrap <Button> 无法正常工作
【发布时间】：2020-02-24 03:35:33
【问题描述】：

所以最近我决定尝试使用 react-bootstrap 库来让我的代码看起来更简单，但由于某种原因，标签无法正常工作。

我的 index.js 文件中包含所有导入的代码和 index.html 中的样式表导入

<Button variant="primary">Hello</Button>

这是我用来创建按钮的

我只是不明白为什么它不使用变体，当我删除变体标签时，它看起来一样。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

默认添加btn btn-default 类，您需要使用className="btn-primary" 覆盖该类。这将解决您的问题

   <Button variant="primary" className="btn-primary">Primary</Button>

【讨论】：

【解决方案2】：

检查您是否在节点模块中安装了 Bootstrap。

如果还没有安装它：npm install bootstrap

在使用 <Button> 组件的 .js 文件上使用以下导入：

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

【讨论】：

【解决方案3】：

当您刚刚通过 <Button variant="primary">Hello</Button> 一个普通的主节点时，您的 <Button> 看起来更像 variant="outline-primary"。也许它是浏览器的缓存问题，无法以正确的格式呈现按钮。我建议您在隐身或私人窗口上尝试相同的代码。您还必须检查 Button Variant 属性的浏览器兼容性。

我还看到，在<ButtonToolbar> 中添加Button 标签会给它一种不同的样式。你也可以试试。

【讨论】：

【解决方案4】：

我知道回答晚了，但有人可能会觉得这很有帮助。您可以使用 color 属性。

<Button color='primary'> Primary </Button>

【讨论】：

【解决方案5】：

我知道我来晚了，但它可能仍然有用。这种不同的样式可能是由另一个 css lib 覆盖引导指令造成的。

如果可能，请尝试在您的应用程序中的其他 css 之后加载引导程序。

【讨论】：

【解决方案6】：

使用 Node 包模块安装 react-bootstrap 之后

以下行可以包含在您的 src/index.js 或 App.js 文件中

导入'bootstrap/dist/css/bootstrap.min.css'；

我也遇到这个问题，将这一行包含在我的项目 index.js 文件中，问题就解决了

【讨论】：