Material UI：如何垂直居中对齐图标按钮？

Question

我有这段 tsx 代码来显示一个文本框和一个图标按钮来添加一些东西：

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

输出是这样的：

如您所见，“+”图标未与文本框的中间垂直对齐。我尝试为按钮添加填充，但它破坏了鼠标悬停时显示的圆圈并使其像椭圆形：

<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete" style={{paddingTop: 19}}>
                <AddCircleOutlineOutlinedIcon />
            </IconButton>

我怎么说“所有这些元素都应该对齐”？

Answer 1

您可以轻松使用Box 组件和flexbox。

<Box
  display="flex"
  alignItems="center"
>
  <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
            <IconButton aria-label="delete">
                <AddCircleOutlineOutlinedIcon />
            </IconButton>
</Box>

它支持所有system 属性。