reactjs - 如何垂直对齐 inputAdornment，使其保持在多行 MUI TextField 的顶部

Question

使用 React，我有一个 MUI 多行 FieldText，其中有几个右对齐的 inputAdornment 图标。

当我填写它时，框会为每一行更改其高度，并且图标在中间垂直居中。

我试图让图标在顶部保持对齐，但没能做到。有办法吗？

抱歉，我无法提供示例，但我被禁止嵌入图像。希望我的问题很清楚，并在此先感谢您的帮助。

Answer 1

听起来你在谈论使用 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"

将其对齐到底部