反応成分にCSSスタイルを適用するにはどうすればいいですか？

Question

最近reactjsを知り、試してみました。 npmリポジトリには、ダウンロードして使用できる多くのコンポーネントがあります。しかし、コンポーネント内の要素にCSSを追加する良い方法は見つかりませんでした。このように反応タブ：https://github.com/reactjs/react-tabs。私は自分のWebページで使うことができますが、どのようにタブにCSSスタイルを追加できますか？

<div className='xxx'></div> 

または

<div style={{color: 'black'}}></div> 

Answer 1

使用のクラス名またはインラインスタイルあなたはreact-tabsソースコードを見れば、あなたはTabコンポーネントが小道具としてclassNameを受け入れることを、表示されますので、あなたは可能性がタブのHTML要素に独自のクラス名を渡します。しかし、コンポーネントのプロパティロジックをclassNameとstyleに実装するのは開発者の責任です。

Answer 2

よう

Answer 3

この質問に対する一般的な答えはありませんが、例えば、classまたはidsを使用して、HTML要素をスタイルするのと同じようにコンポーネントをスタイルする点が異なります。つまり、コンポーネントがどのように実装されているかによって異なり、コンポーネントによって生成されるHTML DOMツリーについての知識が必要です。

提供されたライブラリでは、タブにclassNameプロパティ（生成されたノードのclassプロパティを定義するとclassName）を与えることができます。その結果、<Tab className="my-class" />と記述し、.my-classを使用してコンポーネントのスタイルを設定することができます。

Answer 4

リアクションコンポーネントに複数のCSSスタイルを適用できます。 以下のコードを参照してください。

var MultipleCss = React.createClass({ 
    getInitialState: function(){ 
    return { 
     score: 20 
    } 
    }, 
render: function() { 

    const starrate = { 
    star:{ 
     clear: 'none', 
     float: 'left', 
     margin: '0px 4px 0px 0px', 
     display: 'block', 
     width: '15px', 
     height: '15px', 
     minWidth: '15px', 
     padding: '0px', 
     cursor: 'pointer', 
     background: 'url(' + 'sprite.png' + ') no-repeat' 
    }, 
    position:{ 
     backgroundPosition: '-257px -147px' 
    }, 
    active: { 
     backgroundPosition: '-235px -147px' 
    } 
    }; 
    return (
    < div> 
     <label style={Object.assign({}, starrate.star, starrate.position)}> </label> 
    </div> 
); 
} 

}）;

条件に基づいてラベルにCSS（アクティブ）を追加したいとします。したがって、以下のようにすることができます：

<label style={Object.assign({}, starrate.star, starrate.position, this.state.score >=20 && starrate.active)}> </label> 

アクティブクラスは、state.score> = 20のときはいつでもラベルに適用されます。