reactjs - 设置 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 的 TextField 的一部分，因此显式传递的 InputProps 将完全替换 InputProps 中的 params。

您可以通过将 params.InputProps 与额外的 InputProps 结合使用来解决此问题，例如以下代码:

InputProps={{ ...params.InputProps, ...moreClasses.input }}

Autocomplete 也是 passes InputLabelProps ，所以即使它没有以明显的方式破坏，你也应该对 InputLabelProps 做同样的事情:

InputLabelProps={{ ...params.InputLabelProps, ...moreClasses.label }}

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