[英]Material-UI Autocomplete is not working when setting TextField InputProps
I'm using Material-UI Autcomplete component ( Free solo version) and everything is working fine until I tried to change the color of the text (inside the TextField
).我正在使用Material-UI Autcomplete组件(免费独奏版),一切正常,直到我尝试更改文本的颜色(在
TextField
内)。
My code looks like this:我的代码如下所示:
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} />
/>
Expected behavior预期行为
When you start typing you can see the autcomplete and the text you type should have a red color.当您开始输入时,您可以看到自动完成,并且您输入的文本应该是红色的。
Actual behavior实际行为
The text color is red but the autocomplete is not working anymore.文本颜色为红色,但自动完成功能不再起作用。
I created this live running example to illustrate the problem with 3 components:我创建了 这个实时运行示例来说明 3 个组件的问题:
The Text Field only (works)仅限文本字段(有效)
The Autocomplete without changing the color using InputProps
(works)使用
InputProps
不改变颜色的自动完成(作品)
The Autocomplete with changing the color using InputProps
(does not work)使用
InputProps
更改颜色的自动完成(不起作用)
Note笔记
By setting InputLabelProps
the autocomplete continue working and the color of the label is changed (to blue in the example I shared)!通过设置
InputLabelProps
自动完成功能继续工作并且 label 的颜色发生了变化(在我分享的示例中为蓝色)! So I can't figure it out why it's not working when setting InputProps
.所以我无法弄清楚为什么在设置
InputProps
时它不起作用。
Any feedback about this issue?关于这个问题的任何反馈?
Passing InputProps
causes problems because the Autocomplete
component passes InputProps as part of the params
passed to TextField
so the InputProps
passed explicitly will completely replace the InputProps
in params
.传递
InputProps
会导致问题,因为Autocomplete
组件将 InputProps作为传递给TextField
的params
的一部分传递,因此显式传递的InputProps
将完全替换params
中的InputProps
。
You can fix this by combining params.InputProps
with your additional InputProps
such as in the following code:您可以通过将
params.InputProps
与其他InputProps
组合来解决此问题,例如以下代码:
InputProps={{ ...params.InputProps, ...moreClasses.input }}
Autocomplete
also passes InputLabelProps , so even though it doesn't break in as obvious of a manner, you should do the same for InputLabelProps
: Autocomplete
也通过 InputLabelProps ,所以即使它没有以明显的方式闯入,你也应该对InputLabelProps
做同样的事情:
InputLabelProps={{ ...params.InputLabelProps, ...moreClasses.label }}
Related answer: Setting text color, outline, and padding on Material-ui Autocomplete component相关答案: 在 Material-ui 自动完成组件上设置文本颜色、轮廓和填充
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.