javascript - react bootstrap - adding custom bsStyle property to button

Question

I am using react-bootstrap for my project and I am trying to add custom bsStyle property to the button component. If I use the default bootstrap classes according to the following link http://react-bootstrap.github.io/components.html#buttons the class name is rendered properly. However if i change the property to bsStyle='facebook' it renders btn-undefined

So in short, I am clueless where am I going wrong when I pass bsStyle property to the group in react bootstrap.

This is my HTML looks like

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

and if I change my code to

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

it works fine and the class is rendered properly.

This is the console html log

Answer 1

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

使用反应引导 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';

Answer 2

看起来 bsStyle 的可用值是：

• 基本的
• 成功
• 信息
• 警告
• 关联

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

Answer 3

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