如何避免 Space 组件中的输入大小缩小？ [蚂蚁]

Question

我的输入占据了整个宽度，这是异常行为。

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

现在我需要在这个输入后面添加一个按钮。我决定使用 Space 组件，但随后输入缩小了。如何让输入填充 Space 组件中的整个 space？

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

Answer 1

你最好只使用 div。我对 AntD 的个人体验是，使用它们的组件“自定义”layouts/spacing 真的很难，即使尝试使用 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>

如何避免 Space 组件中的输入大小缩小？ [蚂蚁]

How to avoid input size shrinking in a Space component? [antd]

javascript

reactjs

antd