Ant Design中Form Item嵌套Autocomplete组件高度异常过大问题咨询

嘿，我来帮你拆解下这个Form Item嵌套Autocomplete后高度异常的问题！大概率是这几个原因导致的：

• Form Item默认样式叠加：Ant Design的Form.Item组件自带默认的上下内边距和外边距，哪怕你没设置label，这些样式也会存在。当它包裹Autocomplete时，Autocomplete自身的容器样式会和Form.Item的默认间距叠加，直接把整体高度撑大了。
• Autocomplete自身容器的默认样式：Autocomplete组件的外层容器本身就有默认的高度或内边距配置，和Form.Item的样式没兼容好，就容易出现高度异常。
• 缺少布局属性配置：如果没给Form.Item设置合适的layout属性（比如vertical、horizontal或者inline），也没通过自定义样式控制高度，就会让默认样式“自由发挥”，导致高度超标。

给你几个实用的解决办法，你可以挨个试试：

• 移除Form.Item的默认间距：直接给Form.Item加自定义样式覆盖默认的margin和padding：

  <Form.Item style={{ margin: 0, padding: 0 }}>
    {getFieldDecorator('country', {
      rules: [{ required: true, message: 'Please select country!' }]
    })(
      <AutoComplete
        dataSource={["India", "USA"]}
        placeholder="Country"
        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
      />
    )}
  </Form.Item>
  

• 给Autocomplete指定高度：直接给Autocomplete设置固定高度，对齐Ant Design的默认输入框高度（一般是32px）：

  <AutoComplete
    style={{ height: '32px' }}
    dataSource={["India", "USA"]}
    placeholder="Country"
    filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
  />
  

• 使用Form.Item的noStyle属性：这个属性会让Form.Item只保留表单校验的核心功能，移除所有默认样式，完美避免样式冲突：

  <Form.Item noStyle>
    {getFieldDecorator('country', {
      rules: [{ required: true, message: 'Please select country!' }]
    })(
      <AutoComplete
        dataSource={["India", "USA"]}
        placeholder="Country"
        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
      />
    )}
  </Form.Item>
  

内容的提问来源于stack exchange，提问作者bits