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

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

введите описание изображения здесь


reactjs javascript twitter-bootstrap react-bootstrap
person zaq    schedule 17.04.2015    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Получил работу с 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';
person LoicUV    schedule 21.08.2015

arrow_upward
2
arrow_downward

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

  • начальный
  • успех
  • Информация
  • предупреждение
  • ссылка

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

person Tomas Kirda    schedule 17.04.2015
comment
Есть ли способ установить собственный стиль bsStyle? Другой вариант - установить className вручную, например, className = btn-facebook, но тогда по умолчанию bsStyle будет 'btn-default', который переопределяет стиль btn-facebook. - person zaq; 17.04.2015
comment
Задайте className и заставьте ваши стили загружаться после начальной загрузки или установите больший вес, будучи более конкретным, чем стиль начальной загрузки. Или используйте! Important (не рекомендуется). - person Tomas Kirda; 18.04.2015

arrow_upward
1
arrow_downward

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

person Matt Smith    schedule 20.04.2015
comment
да, я создал проблему в git для этого, и сегодня утром исправление было отправлено в главную ветку. - person zaq; 21.04.2015