如何垂直对齐一个输入装置，因此它保持在多行MUITextfield

Question

您的意思是这样：

  <div sx={{position: 'relative'}}>
        <InputAdornment sx={{position: 'absolute', top: 0}}>
    ///icons
        </InputAdornment>
  </div>

听起来好像您正在谈论使用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"
        }
    }}/>

Answer 1

这里对我来说看起来很大：

Answer 2

alignItems:"flex-end"

为您的元素提供一个类名称，然后使用：

.classname { align-self: flex-start; }