如何将 Material UI 按钮和 TextField 对齐在同一行、同一高度？

Question

我正在尝试从 Material UI 库中获取a）与旁边的<Button>高度相同；<TextField>b) 使其与同一字段对齐。

和<Button>都<TextField>位于各自的<Grid>组件内（用容器包裹它们）。

容器<Grid>具有 prop alignItems="center"，它会产生以下结果：

在这里，我遇到了困难，试图让 的高度与<Button>输入字段的高度相匹配。这一定是一个比较常见的需求——有没有简单的方法来实现这个？

Answer 1

鉴于您的每个元素<Grid>本身都在组件中，这应该可以工作：

https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx