react bootstrap - 添加自定义 bsStyle 属性 到按钮

Question

我正在为我的项目使用 react-bootstrap，我正在尝试将自定义 bsStyle 属性 添加到按钮组件。如果我根据以下 link http://react-bootstrap.github.io/components.html#buttons 使用默认 bootstrap classes，则 class 名称会正确呈现。但是，如果我将 属性 更改为 bsStyle='facebook' 它会呈现 btn-undefined

所以简而言之，当我将 bsStyle 属性 传递给反应组 bootstrap.

时，我不知道我哪里出错了

这是我的HTML样子

<Button id="facebook-btn" bsStyle="facebook" bsSize="large" block>
</Button>

如果我将代码更改为

<Button id="facebook-btn" bsStyle="primary" bsSize="large" block>
</Button>

它工作正常并且 class 正确呈现。

这是控制台html日志

Answer 1

bsStyle 的可用值似乎是：

• 小学
• 成功
• 信息
• 警告
• link

所以当它尝试查找 facebook 样式时它失败了，因此它被设置为未定义。

Answer 2

您看到这个拉取请求了吗：https://github.com/react-bootstrap/react-bootstrap/pull/496。我将很快发布包含此更改的版本。

Answer 3

通过在我的根组件中定义，让它与 styleMaps 一起工作：

With react-bootstrap 0.23.7

import {styleMaps} from 'react-bootstrap';

styleMaps.addStyle('facebook');

编辑：

Now with react-bootstrap 0.30.x

import {addStyle} from 'react-bootstrap/lib/utils/bootstrapUtils';
import Button     from 'react-bootstrap/lib/Button';

addStyle(Button, 'facebook'); // can add more params for more styles

编辑 2：

官方文档link：Custom Styles

编辑 3：

当我将我的设置从 browserify 迁移到 webpack2 时，它不再使用这种语法，但将其更改为这种语法仍然有效：

// import Button  from 'react-bootstrap/lib/Button'; // previous
import {Button}   from 'react-bootstrap';