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

Question

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

所以简而言之，当我将bsStyle属性传递给反应引导程序中的组时，我无能为力。

这是我的HTML看起来像

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

如果我将代码更改为

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

它工作正常，类正确呈现。

这是控制台html日志

Answer 1

通过在我的根组件中定义来使用styleMaps：

  

使用react-bootstrap 0.23.7

import {styleMaps} from 'react-bootstrap';

styleMaps.addStyle('facebook');

编辑：

  

现在使用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：

官方文档链接：Custom Styles

编辑3：

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

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

Answer 2

看起来bsStyle的可用值是：

• 主
• 成功
• 信息
• 警告
• 链接

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

Answer 3

您是否看到过此拉取请求：https://github.com/react-bootstrap/react-bootstrap/pull/496。我将很快发布此更改版本。