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

【问题标题】：How to reduce spacing between antd Form.Items?如何减少antd Form.Items之间的间距？
【发布时间】：2019-11-08 23:53:08
【问题描述】：

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

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

【问题讨论】：

【解决方案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 文件和导入也可以实现同样的效果

【讨论】：

【解决方案2】：

首先找到实现你想要覆盖的样式，通过导入自定义css来覆盖它。你的例子：

.ant-form-inline .ant-form-item {
  margin-right: 8px; // default is 16px
}

【讨论】：