tcomb-form.jsスタイリングの問題

Question

私はreactjsためtcomb形式を使用していますが、私は以下の私のイメージのスタイリングを変更しようとしている問題を抱えています：

テキストフィールドが非常に大きく、私はそれを小さくしたいので、abcStyleという任意のクラスを作成しましたが、私は変更に気づいていません。誰もがこれについて考えている？

import t from 'tcomb-form' 

const FormSchema = t.struct({ 
    name: t.String, //required str 
    email: t.String, //required 
    message: t.String 
}); 

render() { 
    return (
     <form onSubmit={this.onSubmit}> 
     <div className="abcStyle"> 
      <t.form.Form ref="form" type={FormSchema}/> 
     </div> 

     <div className="form-group"> 
      <button type="submit" className="btn btn-primary">Send</button> 
     </div> 
     </form> 
    ) 
    } 

var abcStyle = { 
    paddingLeft: 2000, 
    width: 5000, 
    color: '#3a3335' 
}; 

Answer 1

あなたのラッパーは、あなたが起こることを期待し何をすべきか、5000のwidthを持っていますか？

これは唯一の制約であるため、入力フィールドに必要なサイズにラッパーを作成する必要があり、利用可能なすべてのスペースを埋めます。

var abcStyle = { 
    margin: '0 auto', 
    width: '80%', 
    color: '#3a3335' 
}; 

Answer 2

abcStyleにdisplay: blockを追加するとどうなりますか？