Как уменьшить расстояние между antd Form.Items?

Question

Как уменьшить расстояние между двумя элементами Form.Item в форме?

например, в любой из форм antd examples интервал между 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с CSS-in-JS :

// 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
}