Material UI - 在 TextField 中垂直显示装饰答案

【问题标题】：Material UI - Show adornments vertically in TextFieldMaterial UI - 在 TextField 中垂直显示装饰
【发布时间】：2021-01-27 01:09:06
【问题描述】：

我正在尝试在材质 ui 文本字段中垂直显示装饰，但没有运气。它总是水平放置。有没有办法垂直展示装饰品？

代码：

<TextField 
   variant="filled" 
   fullWidth 
   multiline 
   rowsMax={7}
   onFocus={() => handleInputFocus({})}
   onBlur={() => handleInputFocus({})}
   InputProps={{
   ...(isSelected ? { endAdornment:
   <InputAdornment position="start">
      <Box mb={3}>
         <SaveIcon color="primary" className={cursorStyle} onClick={() => deleteNote()} />
         <DeleteIcon className={cursorStyle} onClick={() => deleteNote()} />
      </Box>
    </InputAdornment> }: {})
  }}
/>

实际输出：

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

使用 display flex，尝试在 InputAdornment 行中添加style={{ display: 'flex', flexDirection: 'column'}} 为<InputAdornment position="start" style={{ display: 'flex', flexDirection: 'column'}}>

然后只需修复图标的样式。因为他们可能会跳出框框边界。

【讨论】：

很酷，它起作用了，但我不得不删除 InputAdornment 内的 Box。谢谢
不客气，我很高兴它有帮助。实际上，如果您的组件需要 Box，您可以尝试将样式添加到 Box 而不是 InputAdornment。但我不确定它是否如你所愿。