web-dev-qa-db-ja.com

react-bootstrapコンポーネントをカスタマイズする方法は？

Cssクラスをオーバーライドする/ react-bootstrapコンポーネントをカスタマイズする最良の方法は何ですか？ -（ドキュメントを読みましたが、何かが足りない限り、これはカバーされません）。

私が読んだことから、それはインラインスタイル（ラジウム）とCSSモジュールの間の選択のようですが、どちらが優れているのですか？

reactjsreact-bootstrapinline-stylesreact-css-modules
8
AloeVeraForty

これがあなたの質問に答えるかどうかはわかりませんが、 Documentation は例を明確に提供しています。たとえば ボタン

小道具

 + -------- + --------- + -------- + ---------------- ---------------------------- + 
 |名前|タイプ|デフォルト|説明| 
 + -------- + --------- + -------- + -------------- ------------------------------ + 
 | bsClass |ストリング| 'btn' |コンポーネントのベースCSSクラスとプレフィックス| 
 + -------- + --------- + -------- + ------- ------------------------------------- +

これを変更して、ボタンコンポーネントにカスタムCSSクラスを追加できます。また、componentClassを設定してコンポーネントを変更することもできます。

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

どこ custom-classは、可能なCSSクラスです

コンポーネントに新しい非ブートストラップCSSスタイルを提供します。

FiddlebsClassの使用方法の例。

インラインスタイル：

bug filledによると、インラインスタイルは公式にはサポートされません。

実際のスタイルの小道具を使用したい場合。 bsClassは、bootstrap CSSクラスがインラインスタイルではないコンポーネントに適用される方法を調整するためのものです

しかし issue は次のように述べています：

必要に応じて自由に使用できます。正式な意見はありません。

[〜＃〜] note [〜＃〜]react-bootstrapによって提供されるすべてのコンポーネントが、bsClassを介したクラスのカスタマイズを許可するわけではありません。 パンくずリスト

9
wolendranh

私のようなほとんどの人にとってこれに対する答えは、style propを使用してreact-bootstrapコンポーネントにカスタムスタイルを追加できることだと思います。例えば。青いテキストのデフォルトのボタンの場合：

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

または

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>
2
Peter Evans