MUI 4 AutoComplete 选项在 InputProps 中设置 notchedOutline 时不可见

Question

为了将边框颜色设置为 AutoComplete (Material-UI-4) ，我在给定代码中设置 notchedOutline ，它工作正常，但作为副作用，它隐藏了我的箭头图标以打开下拉选项和右侧的十字图标自动完成的手边。

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



  <Autocomplete
        id="tech-spaces"
        value={menuItems.find(
          option => option.value === domain.toLowerCase(),
        )}
        options={menuItems}
        getOptionLabel={(option: any) => option.label}
        onChange={onDomainChange}
        renderInput={params => (
          <TextField
            {...params}
            label="Domain"
            variant="outlined"
            InputProps={{
              classes: {
                root: classes.root,
                notchedOutline: classes.notchedOutline,
              },
            }}
          />
        )}
        size="small"
      />

[![before][1]][1]




[![After setting notchedOutline][2]][2]


[1]: https://i.stack.imgur.com/K1fbm.png
[2]: https://i.stack.imgur.com/CCGKv.png

Answer 1

我讨厌但很高兴地说我从 stackOverflow 本身的下面的帖子中得到了答案:) .

材质自动完成功能不适用于InputProps

下面的代码更改参考上面的帖子。

InputProps={{
                ...params.InputProps,
                classes: {
                  root: classes.root,
                  notchedOutline: classes.notchedOutline,
                },
              }} 

基本上我添加了这部分...params.InputProps，