Как вертикально выровнять inputAdornment, чтобы он оставался вверху в многострочном текстовом поле MUI

Question

Используя реакцию, у меня есть многострочный текст FieldText MUI с парой значков inputAdornment, выровненных по правому краю.

Когда я заполняю его, поле меняет свою высоту для каждой новой строки, а значки располагаются по центру по вертикали.

Я пытаюсь сделать так, чтобы значки оставались выровненными вверху, но не смог. Есть способ?

Извините, я не могу привести примеры, но мне запрещено встраивать изображения. Надеюсь, мой вопрос ясен, и заранее спасибо за вашу помощь.

Answer 1

Вы имеете в виду что-то вроде этого:

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

Answer 2

Похоже, вы говорите об использовании библиотеки компонентов MUI, так что я это сделал. Используя свойство sx TextField, вы можете стилизовать компонент с помощью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"