使用redux-forms <field>但保留旧样式

Question

我有一个3页的表单，我需要使用redux表单将表单数据从3个页面发送到redux存储。但是，仅当我使用<Field>标记时，它才有效。这样做是这样的：

<Field
        name="siteName"
        type="text"
        component={renderField}
        label="Site Name"
      />

renderField组件如下所示：

const renderField = ({ input, name, type, meta: { touched, error } }) => (
  <div>
    <label>{name}</label>
    <div>
      <input {...input} placeholder={name} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

export default renderField

但是，到目前为止，我正在使用react-bootstrap / reactstrap设置表单样式并进行布局，并且必须像这样特别保留它。每当我尝试将两者结合时，样式都会完全改变。这是我的表单代码的当前片段：

<FormGroup row>
                    <Col sm={6}>
                        <Input label="sitName" component={renderField} type="text" name="siteName" id="siteName" placeholder={placeholders.siteName}/>
                    </Col>
                    <Col sm={6}>
                        <Input className="form-control" type="select" id="counties">
                            <option className="selectDefault" disabled value={placeholders.siteCounties} selected>{placeholders.siteCounty}</option>
                            { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
                        </Input>
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={12}>
                        <Input type="textarea"  name="siteAddress" placeholder={placeholders.siteAdd} id="siteAddress" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Col sm={6}>
                        <Input type="email" name="siteEmail" id="siteEmail" placeholder={placeholders.email} />
                    </Col> 
                    <Col sm={6}>
                        <Input type="tel" name="siteNumber"  id="siteNumber" placeholder={placeholders.number}/>
                    </Col>
                </FormGroup>