使用 React,我有一个 MUI 多行 FieldText,其中有几个右对齐的 inputAdornment 图标。
当我填写它时,框会为每一行更改其高度,并且图标在中间垂直居中。
我试图让图标在顶部保持对齐,但没能做到。有办法吗?
抱歉,我无法提供示例,但我被禁止嵌入图像。希望我的问题很清楚,并在此先感谢您的帮助。
最佳答案
听起来你在谈论使用 MUI 组件库,所以我就是这样做的。使用 TextField 的 sx 属性,您可以使用 alignItems:"flex-start"
设置组件样式,这将顶部对齐所有元素,包括输入装饰:
<TextField
label={"Comment"}
multiline
minRows={1}
maxRows={4}
fullWidth={true}
onChange={e => handleChange(e)}
value={currentComment}
InputProps={{
endAdornment: <Button variant="contained" disabled={submitBtnDisabled}
onClick={submitNewComment}
sx={{
marginLeft:"6px",
}}
>Submit</Button>,
sx: {
"& .css-3fezr7-MuiInputBase-root-MuiOutlinedInput-root" : {
padding: "4px 8px 4px 8px"
},
fontSize: ".875rem;",
alignItems:"flex-start"
}
}}/>
使用相同的方法,您还可以使用 alignItems:"flex-end"
关于reactjs - 如何垂直对齐 inputAdornment,使其保持在多行 MUI TextField 的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70370064/