React Bootstrap 按钮看起来褪色了

Question

我用了

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

与这里的问题不同，我在根 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 ，这里是我得到的：

你能post你的按钮截图吗？

Answer 2

今天正好有时间终于弄明白了。有点难以接受，但 href 属性是导致 css 未应用的原因。

考虑到它是官方支持并在此处 https://react-bootstrap.github.io/components.html#buttons-props . On looking deeper at the code that's finally the output using inspect element in chrome, it turns out that the href caused the component to be rendered as an anchor tag. So basically the css was being applied but to an anchor tag. This was the main issue. Hence I just wrapped the anchor tag around the button and now it works perfectly. I still don't know what the actual cause was. I created a small snippet of something similar on jsfiddle here http://jsfiddle.net/zrue0aa1/21/ 的 react-bootstrap 文档中提到的道具并且它有效，这肯定很奇怪。万一其他人遇到这个问题，我的按钮的最终代码是这样的：

<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 按钮看起来褪色了

React Bootstrap button looking faded

javascript

css

twitter-bootstrap

reactjs

react-bootstrap