MUI4 AutoComplete设置notchedOutline后下拉箭头及清除图标消失

问题根源在于你直接替换了TextField的InputProps，覆盖了Autocomplete传递过来的包含图标配置的属性，导致下拉箭头和清除图标丢失。

修改方案如下：

1. 调整renderInput中的TextField配置，合并Autocomplete传递的params.InputProps与自定义样式类：

renderInput={params => (
  <TextField
    {...params}
    label="Domain"
    variant="outlined"
    InputProps={{
      ...params.InputProps, // 保留Autocomplete自带的图标等配置
      classes: {
        ...params.InputProps?.classes, // 合并原有样式类
        root: classes.root,
        notchedOutline: classes.notchedOutline,
      },
    }}
  />
)}

2. 原有useStyles代码无需改动：

const useStyles = makeStyles(theme => {
  const isLightTheme = theme.palette.type === 'light';
  return {
    root: {
      '& $notchedOutline': {
        borderColor: isLightTheme ? COLORS.GREY : COLORS.WHITE,
      },
    },
    notchedOutline: {},
  };
});

这样既可以成功修改边框颜色，又能保留Autocomplete自带的下拉箭头和清除图标。

内容的提问来源于stack exchange，提问作者Nitin Daphale