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

Question

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

所以简而言之,当我将bsStyle属性传递给react bootstrap中的组时,我无能为力.

这是我的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:

官方文档链接:自定义样式

编辑3:

当我将我的设置从browserify迁移到webpack2时,它不再使用此语法,将其更改为此工作:

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