在 Material-ui 中变体类型为“概述”的文本字段开头带有图标的自定义文本字段

Question

大家

我一直在尝试使用material-ui 在TextField 组件的开头实现一个图标。 我相信读者对这个e Material UI 库有所了解。我坚持在这个项目中使用版本 4。

我确实找到了一些实现这一目标的方法，并且我确实尝试过。但它在某些条件下起作用。也就是说，如果我尝试为 TextField 的 notchedOutline 设置样式，就像给它一个 borderRadius em> 或图标不可见的东西。虽然在检查了元素之后，我确实在那里找到了它。我确实尝试改变颜色和一切，但没有任何效果。

这是我需要的：

Image Describing my need

这是我得到的：

The coded output image

这是我尝试过的代码。

import {....,TextField,InputAdornment } from "@material-ui/core";
......... 

<TextField
    variant="outlined"
    InputProps={{
        startAdornment: (<InputAdornment position="start"><img src={someImage} /></InputAdornment>)
        }}
    classes={{
      root classes.textField,
    }}
    fullWidth
/>

........

谁能帮我解决这个问题。

谢谢！！

Answer 1

您在<InputAdornment/> 组件中作为孩子使用的图像有问题。确保将其导入correctly。但是，根据文档，<InputAdornment/> 期望为孩子 - The content of the component, normally an IconButton or string.

因此，您应该安装@material-ui/icons package 并在img 上使用它们的图标：

import MailIcon from '@material-ui/icons/Mail';

...

InputProps={{
            startAdornment: <InputAdornment position="start"><MailIcon/></InputAdornment>,
          }}

Demo