Redux-Form Field 仅在输入底部出现一行而不是框。有没有办法拿到盒子？

Question

我正在使用 redux-form 并设置注册表单。这些字段与其文档站点上沙盒预览中显示的字段不同。

我试图分别为字段和输入提供 bootstrap classNames 表单组、表单控件，但它似乎是默认操作。只是底部的一个栏。

实际上我有一个蓝色背景，所以我需要一个完全白色的框，这样用户就可以看到输入字段的灰色占位符。

我的 renderFields 方法：

renderFields(){
    return _.map(formFields, ({name,type,placeholder}) =>{
         return(
                 <Field
                     key={name}
                     type= {type}
                     name={name}
                     placeholder={placeholder}
                     component={SignupField}
                 />
                );
})

和字段方法：

<div className="form-group">
        <input type={type} className="form-control" {...input} 
placeholder={placeholder}/>
        <div className="red-text" style={{marginBottom:"30px"}}>
        {touched && error}
        </div>
</div>

和形式：

<form class="user-forms" onSubmit= 
{this.props.handleSubmit(values=>this.submitForm(values))}>
                    {this.renderFields()}
                    <button className="btnSubmit btn btn-primary" 
type="submit">Create Account
                    </button>
                    </form>

我希望每个输入都有一个框，而不是底部的一行。

Answer 1

好的，我正在使用造成干扰的物化 css。

Redux-Form Field 仅在输入底部出现一行而不是框。有没有办法拿到盒子？

Redux-Form Field appearing just a line on the bottom of inputs instead of box. Is there a work-through to get the box?

node.js

reactjs

bootstrap-4

redux-form