reactjs - tcomb-form.js 样式问题

Question

我正在为 reactjs 使用 tcomb-form，但在尝试更改以下图像的样式时遇到了问题：

文本字段非常大，我想让它更小，所以我创建了一个名为 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

添加display: block到 abcStyle 怎么样？

Answer 2

你的包装器有一个widthof 5000，你期望会发生什么？

您必须将包装器设置为您想要输入字段的大小，因为这是它们拥有的唯一约束，它们将填充所有可用空间。

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