className propをMaterial-ui子/内部要素に渡す

Material-UIコンポーネントの内部要素にcssクラスを割り当てることは可能ですか？例として<RaisedButton />コンポーネントを使用すると、classNameをRaised Button内のlabel要素に適用したいとします。className propをMaterial-ui子/内部要素に渡す

<RaisedButton labelStyle={{...}}。

labelStyleはオブジェクトを探しているので、インラインコードを追加するのではなく、カスタムCSSクラスをどのように適用しますか？

出典

2017-01-04 Michael Stearn

他の回答に似

、しかし、あなたがlabelプロパティとしてではなく、子として<span>要素を渡すことができます。

<RaisedButton label={<span className="your-class">Your label</span>} />

これはRaisedButtonによって適用されるインラインスタイル/テーマを保存します。

https://jsfiddle.net/L8d2b1y7/1/

出典

2017-01-04 22:34:16

ありがとうございましたJeff！あなたの答えは、私がちょうど前に別のファイルのiconElementLeft/Rightの小道具を持つAppBarコンポーネントでそれをしたことを思い出させました。私の脳は、別の状況でその接続を提供することを単に拒否したと思います。 –

あなたは小道具ではなく子供としてラベルを渡すことができると考えてください。

<RaisedButton> 
 
    <span className="your-class>Your label</span> 
 
</RaisedButton>

RaisedButtonためのclassNameの小道具はルート要素に適用されます。

出典

2017-01-04 22:18:14 Tom

生きている間、1は、その材料-UI申し出ラベルスタイルのどれを持っていないだろう。インラインではなくクラスでスタイルを追加/オーバーライドしながら、これらのスタイルを維持できるようにするために、より具体的にすべきだと思います。最後の行に関しては、子要素にその小道具を渡す方法がないと言っていますか？ –

Tomの答えは正しいですが、ラベルプロパティ... あなたのラベル} />を使用することもできます。/CSSのクラスが適用される前に、RaisedButtonによって適用されたスタイル/スタイル（例えば、適用する "font-size"と "text-transform"）。実際には、あなたのcssクラスに適用されたスタイルをビルドしたくないかもしれません。もしそうでなければ、Tomが示唆するようにspanを子として配置してください。 –

className propをMaterial-ui子/内部要素に渡す

答えて

関連する問題