我使用的是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} />
/>
预期行为
当您开始输入内容时,您会看到自动完成功能,并且您输入的文字应显示为红色。
实际行为
文字颜色为红色,但自动完成功能不再起作用。
我创建了此实时运行示例,以说明3个组件的问题:
仅文本字段(有效)
自动完成而不更改颜色InputProps
(使用)
使用更改颜色的自动完成功能InputProps
(无效)
注意
通过设置InputLabelProps
自动完成功能,继续工作并更改标签的颜色(在我共享的示例中为蓝色)!所以我不知道为什么设置时它不起作用InputProps
。
关于此问题有任何反馈吗?
传递InputProps
会引起问题,因为Autocomplete
组件将InputProps作为params
传递给的一部分传递,TextField
因此InputProps
传递的显式将完全替换InputProps
in params
。
您可以通过params.InputProps
与其他InputProps
代码结合使用来解决此问题,例如以下代码:
InputProps={{ ...params.InputProps, ...moreClasses.input }}
Autocomplete
还传递InputLabelProps,所以即使它没有以明显的方式中断,您也应该对以下内容执行相同的操作InputLabelProps
:
InputLabelProps={{ ...params.InputLabelProps, ...moreClasses.label }}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句