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

Question

如何减少一个窗体中两个Form.Item之间的空间？

例如，以任何形式的examples形式，Form.Item之间的间距都相同，并且（在我看来）很大。

Answer 1

您需要设置Form.Item组件的样式，例如，使用内联样式：

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

或通过覆盖css类（例如，使用 CSS-in-JS ）来整个Form：

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

演示：

  

使用.css文件并导入该文件即可实现

Answer 2

首先找到实现您要覆盖的样式，然后通过导入自定义css覆盖它。您的示例：

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