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

阿拉·埃丁·杰巴里

我使用的是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

关于此问题有任何反馈吗?

瑞安·科格斯威尔(Ryan Cogswell)

传递InputProps会引起问题,因为Autocomplete组件将InputProps作为params传递给的一部分传递,TextField因此InputProps传递的显式将完全替换InputPropsin params

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

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

Autocomplete传递InputLabelProps,所以即使它没有以明显的方式中断,您也应该对以下内容执行相同的操作InputLabelProps

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

编辑cool-sara-5l79o

相关答案:在Material-ui自动完成组件上设置文本颜色,轮廓和填充

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么在尝试设置雨水动画时此睡眠功能不起作用?

在React中设置Material UI的TextField组件的defultValue

在material-ui中使用TextField对象的inputProps时,将CSS属性与连字符一起使用

Godot / GDScript:自动完成功能不起作用

在material-ui Autocomplete TextField中以编程方式设置值

当抽屉打开时,material-ui TextField输入不起作用

Mat的自动完成功能不用作FormControl时设置输入值

React Material UI自动完成功能不适用于Formik

当输入类型为密码并使其上方的输入字段启用自动完成功能时,autocomplete ='off'不起作用

jQuery自动完成功能不起作用?

我为emacs创建函数时,bash自动完成功能不起作用

自动完成功能不起作用

自动跳转自动完成功能不起作用

jQuery自动完成功能-悬停时不突出显示项目,箭头不起作用

jQuery自动完成功能不起作用

更新jquery-ui版本后,自动完成功能不起作用

ASP.NET MVC 4中的jQuery UI自动完成功能不起作用

蚀Java自动完成功能不起作用

HTML自动完成功能不起作用

组合框自动完成功能不起作用

使用jQuery-UI自动完成功能选择选项时设置多个输入的值

阿尔及利亚角度自动完成功能不起作用

快速设置TextField边框样式的功能不起作用

vscode键入自动完成功能不起作用

Django自动完成功能不起作用

使用别名调用xdg-open自动完成功能时不起作用

AJAX 自动完成功能不起作用

Google 地方信息自动完成功能有时不起作用

尝试使其动态时,jQuery AJAX 自动完成功能不起作用