tcomb-form.js styling issues

Question

I am using the tcomb-form for reactjs and I am having issues trying to change the styling of my image below:

The text fields are extremely large and I want to make it smaller, so I created an arbitrary class called abcStyle, but I am not noticing any changes. Anyone have an idea for this?

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

What about adding display: block to abcStyle ?

Answer 2

Your wrapper has a width of 5000, what do you expect to happen?

You have to make the wrapper the size you want your input fields since this is the only constrain they have and they will fill all the space available.

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