如何避免 Space 組件中的輸入大小縮小？ [螞蟻]

Question

我的輸入采用整個寬度，這是例外行為。

<Input placeholder='Filter' style={{ marginBottom: 50}}/>

現在我需要在這個輸入后面添加一個按鈕。 我決定使用 Space 組件，但隨后輸入縮小了。 如何讓輸入填充空間組件中的整個空間？

<Space>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</Space>

Answer 1

你最好只使用div 。 我對 AntD 的個人經驗是，使用它們的組件“自定義”布局/間距真的很困難，即使嘗試使用style屬性對其進行樣式設置也是如此。

// Works
<div style={{ display: "flex", gap: "8px" }}>
<Input placeholder='Filter'/>
<Button type='primary'>Filter</Button>
</div>

// Doesn't work
<Space style={{ display: "flex" }}>
<Input placeholder='Filter' style={{ flex: "auto" }} />
<Button type='primary'>Filter</Button>
</Space>