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

Got it working with styleMaps by defining in my root component :

With react-bootstrap 0.23.7

import {styleMaps} from 'react-bootstrap';

styleMaps.addStyle('facebook');

EDIT :

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

EDIT 2 :

Official documentation link : Custom Styles

EDIT 3 :

When I migrated my setup from browserify to webpack2 it wasn't working with this syntax anymore, changing it to this worked though :

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

Answer 2

Looks like available values for bsStyle are:

• primary
• success
• info
• warning
• link

So when it is trying find facebook style it's failing, therefore it is set to undefined.

Answer 3

Have you seen this pull request: https://github.com/react-bootstrap/react-bootstrap/pull/496. I will be publishing a release with this change shortly.