6

プロジェクトに react-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 ログです

ここに画像の説明を入力

4

3 に答える 3

7

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';
于 2015-08-21T12:00:55.397 に答える
2

bsStyle で使用可能な値は次のようになります。

  • 主要な
  • 成功
  • 情報
  • 警告
  • リンク

そのため、Facebook スタイルを見つけようとすると失敗するため、未定義に設定されます。

于 2015-04-17T19:37:15.097 に答える