MDLの幅を設定する方法TextArea

Question

Material Design LiteのマルチラインTextFieldの幅を設定する最適な方法は何ですか？ CSSの幅をピクセル値に設定しても機能しますが、テキストを入力するときにクリックすると、下線の強調表示がコンポーネントの全幅に及ぶことはありません。私はcols = "80"を試したが、うまくいかなかった。私もwidth = "100％"を試してみましたが、うまくいきませんでした。私はReactJSとTypeScriptで作業しています。

Answer 1

幅は、テキストフィールドのmdl-textfieldコンテナdivに設定する必要があります。たとえば、次のようになります。

.mdl-textfield{ 
    width:500px; 
} 

すべてのテキストフィールドにスタイルが適用されますが、それらのうちの1つだけがその幅になるようにするには、mdl-textfieldクラスと同じdivにIDまたはクラスを定義し、そのスタイルを適用します。たとえば、次のようにCSS

.extrawide{ 
    width:500px; 
}