如何减少antd Form.Items之间的间距？

Question

如何减少表单中两个 Form.Item 之间的空间量？

例如，在任何 antd 表单示例中，Form.Item之间的间距都是相同的，并且（在我看来）相当大。

Answer 1

您需要为Form.Item组件设置样式，例如使用inline-style：

// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
  <Input />
</Form.Item>

或者Form通过覆盖整个 css-class，例如使用CSS-in-JS：

// Apply style to all form
const StyledForm = styled(Form)`
  .ant-form-item {
    margin-bottom: 0px;
  }
`;

演示：

同样可以通过.css文件和导入来实现