2016-05-26 8 views
0

私は次のコードを持っている:ブートストラップDropdownButtonスタイリング

header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'> 
    {item_menu} 
    </DropdownButton>); 

を私は、リンクオプションがそれにデフォルト設定されていると考えると白文字(現在は青)であることをブートストラップでスタイリングを持っていると思います。リンクの色を渡すためにブートストラップのスタイルを変更したり、リンクをページ上で少し動かすなどの他のプロパティはどのように変更できますか?

ほとんどのことがReactJSコンポーネント内で行われているので、私たちはCSSスタイリングをほとんどしません。

答えて

0

私はオンラインチャットルームの助けを借りてそれを理解しました。ここに私がしたことがあります。

私は最初、このような反応コンポーネントでスタイル(dropDownLinkStyle)を作成しました。

let dropDownLinkStyle = { 
    color: 'white' 
}; 

次に、このようなdropdownButtonで(dropDownLinkStyle)を使用しました。

header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'> 
    {item_menu} 
    </DropdownButton>); 

私はこれが役立つことを望みます。これは私がリンクである私のbsStyleを保つことを可能にしました(ブートストラップにボタンの代わりに私の画面上にリンクタイプを欲しいと言っています)、そのリンクを白い文字に変えることができます。オブジェクトに追加するだけで、より多くのスタイリングを渡すこともできます - dropDownLinkStyle

0

cssファイルでブートストラップCSSをオーバーライドしてください(これはあなたの理解していないようです)。これは、アプリケーションのすべてのリンクでグローバルな効果を保証するためのより良い方法です。

DropdownButtonという名前で送信しないでください。代わりに、カスタムCSSでstyleプロパティを挿入してください。ただし、bsStyleを削除しなくても、styleを挿入できます。アプリケーションに同じグラフィックチャートが表示されるように、独自のコンポーネントを作成してDropdownButtonを作成することができます。

関連する問題