tcomb-form.js样式问题

Question

我正在使用tcomb-form for 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添加到a​​bcStyle？