реакция bootstrap - добавление пользовательского свойства bsStyle к кнопке

Question

Я использую реакцию-бутстрап для моего проекта, и я пытаюсь добавить собственное свойство 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, определив в моем корневом компоненте:

С реагировать-самозагрузку 0.23.7 ​​

import {styleMaps} from 'react-bootstrap'; 

styleMaps.addStyle('facebook'); 

EDIT:

Теперь реагирующим 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:

Официальная ссылка документации: Custom Styles

EDIT 3:

Когда я мигрировал мои настройки из browserify в webpack2 не работали с этим синтаксисом больше, изменяя его к этому сработало хотя:

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

Answer 2

Похоже доступные значения для bsStyle являются:

• первичной
• успех
• Информация
• предупреждение
• link

Поэтому, когда он пытается найти стиль facebook, он не работает, поэтому он установлен в неопределенный.

Answer 3

Вы видели этот запрос на растяжение: https://github.com/react-bootstrap/react-bootstrap/pull/496. Я скоро опубликую релиз с этим изменением.