Responsive to loading - adding a custom bsStyle property to a button

Question

I am using response-bootstrap for my project, and I am trying to add my own bsStyle property to the button component. If I use the bootstrap classes at the following link http://react-bootstrap.imtqy.com/components.html#buttons , then the class name displays correctly. However, if I change the property to bsStyle='facebook' , it displays btn- undefined

So, in short, I don’t know where I am wrong when I pass the bsStyle property to the group in the response bootstrap.

This 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 displays correctly.

This is a console html log

Answer 1

Got a job with styleMaps , specifying in my root component:

With bootstrap reaction 0.23.7

 import {styleMaps} from 'react-bootstrap'; styleMaps.addStyle('facebook'); 

EDIT:

Now with reaction-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:

White Papers: Custom Styles

EDIT 3:

When I transferred my setup from the browser to webpack2, it no longer worked with this syntax, changing it to this:

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

Answer 2

It looks like the available values ​​for bsStyle are:

• primary
• success
• Information
• a warning
• link

So, when he tries to find the facebook style, it does not work, so it is set to undefined.

Answer 3

You saw this stretch request: https://github.com/react-bootstrap/react-bootstrap/pull/496 . I will release a release soon with this change.