如何减少 <Form> 中元素之间 ant design 应用的默认边距/填充？

Question

我正在使用 ant design

<Form layout="vertical">

，并且我想将

<Form>

内的价格地图元素之间的间距设置得更小。我尝试在元素上设置

style={{margin:"0px"}}

但它在 UI 上没有变化。

这是价格图的代码。

            <Form.Item
              label="Price Map"
              rules={[{ required: true, message: "Please input Prices!" }]}
            >
              {selectedProducts.flatMap(productId =>
                products
                  .filter(product => product.id === productId)
                  .map(product => (
                    <Input.Group compact layout="horizontal">
                      <Form.Item label={product.productName + " : "} />
                      {product.priceList.map(priceObj => (
                        <Input
                              defaultValue={priceObj.price}
                              addonBefore={priceObj.type}
                              rules={[
                                  {
                                      required: true,
                                      message: "Please input price!"
                                  }
                              ]}
                              
                              style={{ width: "34%" }}
                        />
                      ))}
                    </Input.Group>
                  ))
              )}
            </Form.Item>

Answer 1

<Form.Item style={{ marginBottom: 0 }} />

Answer 2

我可以通过为

style={{ marginBottom: 5 }}

设置

<Input>

来实现此目的

这是我更新的代码。

            <Form.Item
              label="Price Map"
              rules={[{ required: true, message: "Please input Prices!" }]}
            >
              {selectedProducts.flatMap(productId =>
                products
                  .filter(product => product.id === productId)
                  .map(product => (
                    <Input.Group compact layout="horizontal">
                          <div style={{ marginRight: 5 }}> { product.productName + " : " }</div>
                      {product.priceList.map(priceObj => (
                        <Input
                              defaultValue={priceObj.price}
                              addonBefore={priceObj.type}
                              rules={[
                                  {
                                      required: true,
                                      message: "Please input price!"
                                  }
                              ]}
                              onChange={(changedValue) => {
                                  setPriceMap({
                                      ...priceMap,
                                      [priceObj.priceId]: priceObj.price
                                  });
                              }}
                              style={{ width: "34%" , marginBottom: 5 }}
                        />
                      ))}
                    </Input.Group>
                  ))
              )}
            </Form.Item>

Answer 3

如果你使用 React，它会是这样的：

<Form.Item ...    
    labelCol={{
             style: {
                      padding: 0
                    }
            }} />