将图标添加到 Material-UI 的自动完成组件的开头

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 并确保也在嵌套的 prop 中传播：

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

将图标添加到 Material-UI 的自动完成组件的开头

Add icon to the start of Material-UI's Autocomplete component

reactjs

typescript

autocomplete

material-ui

react-props