我有這段 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>
我怎么說“所有這些元素都應該對齊”？
uj5u.com熱心網友回復：
您可以輕松使用Box組件和flexbox。
<Box
display="flex"
alignItems="center"
>
<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
<IconButton aria-label="delete">
<AddCircleOutlineOutlinedIcon />
</IconButton>
</Box>
它支持所有系統屬性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373483.html
上一篇：基于陣列值的物件鍵