设置TextField InputProps时Material-UI自动完成功能不起作用

Question

我正在使用Material-UI Autcomplete组件（免费独奏版本），一切正常，直到我尝试更改文本的颜色（在TextField内部）。

我的代码如下：

const moreClasses = {
    label: { style: { color: 'blue' } },
    input: {
        style: {
            color: 'red',
            borderBottom: `1px solid green`
        }
    }
};
//...
<Autocomplete
    //... classic props as in the official Doc
    renderInput={params => <TextField 
        {...params} 
        label={'label'} 
        InputLabelProps={moreClasses.label}
        InputProps={moreClasses.input} />
/>

预期的行为

当您开始输入文字时，您会看到自动完成，并且您输入的文字应该显示为红色。

实际行为

文本颜色为红色，但自动完成功能不再起作用。

我创建了this live running example来说明这个问题，其中包含3个组成部分：

• 仅文本字段（有效）

• 不使用InputProps更改颜色的自动完成功能（有效）

• 使用InputProps更改颜色的自动完成功能（无效）

注意

通过设置InputLabelProps，自动完成功能将继续工作，并且标签的颜色将更改（在我共享的示例中为蓝色）！因此我无法弄清楚为什么设置InputProps时它不起作用。

有关此问题的任何反馈吗？

Answer 1

传递InputProps会引起问题，因为Autocomplete组件passes InputProps是传递给params的{​​{1}}的一部分，因此显式传递的TextField将完全替换InputProps中的InputProps。

您可以通过将params与其他params.InputProps结合使用来解决此问题，例如以下代码：

InputProps

InputProps={{ ...params.InputProps, ...moreClasses.input }} 也passes InputLabelProps，因此即使它没有以明显的方式破坏，您也应该对Autocomplete做同样的事情：

InputLabelProps

相关答案：Setting text color, outline, and padding on Material-ui Autocomplete component