Question

我用过

<Button bsStyle="primary" bsSize="large">Primary</Button>

与React-bootstrap button bsStyle中的问题不同，我在root html页面中包含了bootstrap css。

我无法解决这个问题。

这是我的代码

Index.ejs Css文件：

Component.jsx：

import {Button, Col, Glyphicon, Label, OverlayTrigger, Row, Table, Tooltip} from "react-bootstrap";


<Button href={version.downloadUri} bsStyle="primary" bsSize="large">

主按钮

主要问题： 我确实看到了按钮，我也认为css正在被应用，因为当我将鼠标悬停在按钮上时，它看起来很正常。另一方面，处于自然状态的按钮看起来很褪色。

Answer 1

此处附上按钮的屏幕截图。它表现得像正常一样。可能你在css中弄乱了一些东西。但是我使用了react-bootstrap，在这里我得到了：

您可以发布按钮的屏幕截图吗？

Answer 2

今天我有空的时候碰巧终于找到了问题。接受它有点难，但是href属性导致css无法应用。

考虑到这是一个正式支持并在这里的react-bootstrap文档https://react-bootstrap.github.io/components.html#buttons-props中提到的道具这一事实，这肯定很奇怪。在使用chrome中的inspect元素更深入地查看最终输出的代码时，事实证明href导致组件呈现为锚标记。所以基本上css正在应用但是锚标签。这是主要问题。因此，我只是将锚标签包裹在按钮周围，现在它完美无缺。我仍然不知道实际原因是什么。我在jsfiddle http://jsfiddle.net/zrue0aa1/21/创建了一个类似的小片段，它可以正常工作。如果其他人遇到此问题，我的按钮的最终代码是：

<a href={version.downloadUri}>
                        <Button className="primary" bsStyle="primary" bsSize="large"
                                disabled={version.version === null}>
                            <span>Download
                            </span><br/>
                            <span>
                              Version : {version.version === null ? "Null" : version.version}
                            </span>
                        </Button>
                        </a>

React Bootstrap按钮看起来褪色

2 个答案: