Автозаполнение пользовательского интерфейса не работает при настройке TextField InputProps

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} />
/>

Ожидаемое поведение

Когда вы начнете печатать, вы увидите автозаполнение и текст, который вы тип должен иметь красный цвет.

Фактическое поведение

Цвет текста красный, но автозаполнение больше не работает.

Я создал этот пример работающего в реальном времени для иллюстрации проблемы с 3 компонентами:

• Только текстовое поле (работает)

• Автозаполнение без изменение цвета с помощью InputProps (работает)

• Автозаполнение с изменением цвета с помощью InputProps (не работает)

Примечание

При установке InputLabelProps автозаполнение продолжает работать, и цвет метки меняется (на синий в примере я поделился)! Так что я не могу понять, почему он не работает при установке InputProps.

Есть какие-либо отзывы об этой проблеме?

Answer 1

Передача InputProps вызывает проблемы, потому что Autocomplete компонент передает InputProps как часть params, переданного TextField, так что InputProps, переданный явно, полностью заменит InputProps в params.

Вы можете исправить это, комбинируя params.InputProps с дополнительными InputProps, такими как в следующем коде:

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

Autocomplete также передает InputLabelProps , поэтому, даже если это не так очевидно, вы должны сделать то же самое для InputLabelProps:

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

Соответствующий ответ: Настройка цвета текста, контура и отступов для компонента автозаполнения Material-ui