自动完成组件内的 React Material UI 图标答案

【问题标题】：React material UI icon insdie auto complete component自动完成组件内的 React Material UI 图标
【发布时间】：2021-03-26 17:07:11
【问题描述】：

我只想将此目标图标放入自动完成组件中。我浏览了文档，但可以找到方法。

在 TextInput 中，这样做可以实现同样的效果

<TextField
    className={classes.margin}
    id='input-with-icon-textfield'
    label='TextField'
    InputProps={{
        startAdornment: (
            <InputAdornment position='start'>
                <AccountCircle />
            </InputAdornment>
        )
    }}
/>

如何在自动完成组件中添加该目标图标？ This is my code

任何帮助！提前致谢！ =)

【问题讨论】：

查看我使用InputAdornment的答案。

标签： javascript css reactjs material-ui

【解决方案1】：

使用InputAdornmentCodeSandbox 的材料方式的工作解决方案。

演示

编辑：

根据您的新要求，我们需要使用样式。

而且我还将您的标签条件更改为：

label={inputValue ? "" : "Near Me..."}

CodeSandbox 的新演示。

结果：

最新：

【讨论】：

这工作正常。但是我对代码进行了微小的更改，我不希望带有边框的“添加位置”标签，而是希望在自动完成组件单元用户选择一个值内显示它。我添加了 ```label={value ? "" : "添加位置"} InputLabelProps={{ shrink: false }}``这两行。在这种情况下，您能否告诉我如何为图标添加右边距。新代码codesandbox.io/s/material-demo-forked-ogw1k
查看新链接。
我们不能将目标按钮保持在左侧并执行此操作吗？
为什么不呢？检查codesandbox.io/s/material-demo-forked-j5yod?file=/demo.js

【解决方案2】：

您可以使用样式。比如：

...
renderInput={(params) => (
 <div>
  <GpsFixedIcon className={classes.gpsIcon} /> //<-- style for icon
  <TextField
   {...params}
   label="Add a location"
   variant="outlined"
   fullWidth
  />
 </div>
)}
...

在useStyles:

const useStyles = makeStyles((theme) => ({
  ...
  gpsIcon: {
    position: "absolute",
    top: "3%"
  }
}));

Here您的代码已修改。

【讨论】：

这很乱。因为文字会与图标相交。
是的@ZunayedShahriar。您的答案要好得多（即使在您的解决方案中，标签始终位于顶部，就像自动完成始终是焦点一样）。
谢谢。赞赏。