设置TextField InputProps时Material-UI自动完成功能不起作用 [英] Material-UI Autocomplete is not working when setting TextField InputProps

问题描述

我正在使用

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

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).

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:

• The Text Field only (works)

• The Autocomplete without changing the color using InputProps (works)

• The Autocomplete with changing the color using InputProps (does not work)

Note

By setting InputLabelProps the autocomplete continue working and the color of the label is changed (to blue in the example I shared)! So I can't figure it out why it's not working when setting 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.

You can fix this by combining params.InputProps with your additional InputProps such as in the following code:

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:

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

Related answer: Setting text color, outline, and padding on Material-ui Autocomplete component

这篇关于设置TextField InputProps时Material-UI自动完成功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！