如何在Material-UI的Autocomplete组件起始位置添加startAdornment图标

你写的代码不生效是因为{...params}展开的位置不对，Autocomplete传给renderInput的params本身自带InputProps属性，你把自定义InputProps写在params展开之前，会被params里的InputProps直接覆盖。

正确的写法是合并两者的InputProps配置：

<Autocomplete
  {...defaultProps}
  onChange={(event, value) => {
    handleOnChange(event, value);
  }}
  id="disable-close-on-select"
  sx={{ width: 300 }}
  renderInput={params => (
    <TextField
      InputProps={{
        // 先展开params自带的InputProps，再追加自定义配置
        ...params.InputProps,
        startAdornment: <InputAdornment position="start">kg</InputAdornment>,
      }}
      {...params}
      label="search"
      variant="standard"
    />
  )}
/>

如果你想要放图标而非文字，直接把kg替换成对应的MUI图标组件即可，比如搜索图标就替换为<SearchIcon />，提前导入对应的图标包就行。

内容的提问来源于stack exchange，提问作者murat dereköylü