在 Material-UI 的 Autocomplete 组件的开头添加图标

Question

我想在Autocomplete 组件的开头添加一个图标。 （与startAdornment） 我读到Autocomplete 是一个普通的文本输入

到目前为止，我尝试添加

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

到<TextField /> 组件。如下：

<Autocomplete
            {...defaultProps}
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            renderInput={params => (
                <TextField
                    InputProps={{
                        startAdornment: <InputAdornment position="start">kg</InputAdornment>,
                    }}
                    {...params}
                    label="search"
                    variant="standard"
                />
            )}
        />

任何帮助都会很棒，因为我是 Material-UI 生态系统的初学者。

defaultProps 是这样定义的。

const defaultProps = {
    options: data,
    getOptionLabel: (option: DataType) => option?.id,
};

Answer 1

道具顺序很重要。您定义的InputProps 被来自renderInput 的params.InputProps 覆盖。这个：

<TextField InputProps={yourProps} {...params}

等同于：

<TextField InputProps={yourProps} InputProps={param.InputProps} {...}

最后的结果是：

<TextField InputProps={param.InputProps} {...}

您需要在传播params 后定义您的自定义InputProps，并确保也传播到嵌套道具中：

renderInput={(params) => {
  return (
    <TextField
      {...params}
      InputProps={{
        ...params.InputProps,
        startAdornment: (
          <InputAdornment position="start">kg</InputAdornment>
        )
      }}
      label="Movie"
    />
  );