ReactJS material-ui TextField apply css

Question

Reを使用してmaterial-uiを使用しています。 cssを使用してカスタムスタイルをTextFieldに適用したいです。具体的には、入力をクリックすると、TextFieldの下線とTextFieldのラベルの色を変更したいと思います。

私はそれをコンポーネントとインラインで行うことができますが、私はclassNameとcssを使いたいと思います。

アイデア？

おかげmaterial-ui以来

Answer 1

はCSSクラスによってコンポーネントのカスタムスタイリングを行うために、その非常にconvinientと簡単ではない、JSにインラインスタイルを使用していますが、そのまだ可能!importantキーワードで。

あなたはTextFieldにcutomのCSSクラスを追加する必要がまず：次に

<TextField 
    id="text-field-default" 
    className="text-field-custom" 
    defaultValue="Default Value" 
/> 

は、例えば、下線スタイルは、そのようにオーバーライドすることができます： `スタイル-components`ため

.text-field-custom>input:focus+div>hr { 
    border-bottom: 2px solid rgb(0, 0, 0) !important; 
}