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

Question

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

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

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

这是我用来创建按钮的

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

Answer 1

默认情况下btn btn-default添加了类，您需要使用className="btn-primary". 这将解决您的问题

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

Answer 2

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

我还发现将Button标签放在里面<ButtonToolbar>会赋予它不同的样式。你也可以尝试一下。