Redux-Form Field Appearing Just A Line On The Bottom Of Inputs Instead Of Box. Is There A Work-through To Get The Box?

I am using redux-form and setting up a sign-up form. The fields are not like that appear in sandbox preview on their documentation site.

I tried to provide bootstrap classNames form-group, form-control for field and input respectively but it appears to be default action. Just a bar on bottom.

Actually I have a blue background so I need a completely white box so user can see the grey placeholder of an input field.

My renderFields method:

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

And Field method:

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

And form:

<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>

I expect a box for each input & not line at bottom.

OK I was using materialize css that caused the interference.