在 TextField Material-ui 的开头显示图像而不是在两侧？

Question

我如何在 TextField 内显示图像，就好像它是文本的一部分一样，就像 InputAdornment 一样，不是在任一侧，而是在 TextField 的开头。

而不是作为文本输入区域旁边的图标，这就是 InputAdornment 所做的（例如，不像查询字段旁边的搜索图标）？

我能想到的唯一方法是将图像放置在 TextField 上方，但我发现这使得图像是输入的一部分变得不明显。

我已经查看了文档，但似乎没有明显的方法来完成此任务。

提前非常感谢！

Answer 1

对您问题的评论部分正确。您无法在<input>不丢失功能的情况下合理地编辑实际内容，但该Textfield组件不仅仅是一个，而且由多个可以包含/显示图像的<input>元素组成。

由于未指定 MUI 版本，我假设您使用的是最新版本。（这也可以通过 MUI 4TextField使用旧makeStyles功能来完成。）

TextField startAdornment您可以通过对底层 CSS 进行一些更改来更改 的位置。本质上，您可以将默认值flex-direction从更改row为column，然后根据您的喜好调整装订线：

    <TextField
      id="input-with-icon-textfield"
      label="TextField"
      variant="outlined"
      sx={{
        ".MuiOutlinedInput-root": {
          paddingTop: "1rem",
          flexDirection: "column"
        },
        img: {
          paddingRight: "1rem"
        }
      }}
      InputProps={{
        startAdornment: <img src="https://via.placeholder.com/180x150/200" />
      }}
      placeholder="Enter image caption..."
    />

产生这个：

工作示例： https: //codesandbox.io/s/inputwithicon-material-demo-forked-tyx7y? file=/demo.js:139-580