【问题标题】: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'}}&lt;InputAdornment position="start" style={{ display: 'flex', flexDirection: 'column'}}&gt;

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

    【讨论】:

    • 很酷,它起作用了,但我不得不删除 InputAdornment 内的 Box。谢谢
    • 不客气,我很高兴它有帮助。实际上,如果您的组件需要 Box,您可以尝试将样式添加到 Box 而不是 InputAdornment。但我不确定它是否如你所愿。
    猜你喜欢
    • 2019-12-29
    • 1970-01-01
    • 2022-06-16
    • 2021-02-11
    • 2019-12-02
    • 2021-04-05
    • 2019-08-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多