tcomb-form.js вопросы стайлинга

Question

Я использую tcomb-форму для reactjs и у меня возникли проблемы, пытаясь изменить стиль моего изображения ниже:

Текстовые поля являются чрезвычайно большими и Я хочу сделать его меньше, поэтому я создал произвольный класс 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

Ваша обертка имеет width из 5000, что вы ожидаете произойдет?

Вы должны сделать оболочку размером, который вы хотите вводить, поскольку это единственный предел, который у них есть, и они заполнят все свободное пространство.

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

Answer 2

Как насчет добавления display: block в abcStyle?