材质自动完成不适用于 InputProps

Question

我正在尝试更改TextField通过 my 呈现的边框Autocomplete，但是当我添加InputProps道具时，Autocomplete不再呈现Chips

<Autocomplete

    multiple

    freeSolo

    options={options}

    renderTags={(value, { className, onDelete }) =>

        value.map((option, index) => (

            <Chip

                key={index}

                variant="outlined"

                data-tag-index={index}

                tabIndex={-1}

                label={option}

                className={className}

                color="secondary"

                onDelete={onDelete}

            />

        ))

    }

    renderInput={(params) => (

        <TextField

            {...params}

            id={id}

            className={textFieldStyles.searchField}

            label={label}

            value={value}

            onChange={onChange}

            variant="outlined"

            //InputProps={{

            //     classes: {

            //         input: textFieldStyles.input,

            //         notchedOutline: textFieldStyles.notchedOutline

            //     }

            //}}

            InputLabelProps={{

                classes: {

                    root: textFieldStyles.label

                }

            }}

        />

    )}

/>

上面的代码有效，并且一旦我取消注释InputProps行，输入Chip就会在选择或输入项目时呈现渲染。

谢谢

Answer 1

发生这种情况是因为 InputProps 属性覆盖了 params 的 InputProps 参数，您必须合并 params 的 InputProps 属性：InputProps={{&nbsp; &nbsp; ...params.InputProps,&nbsp; &nbsp; classes: {&nbsp; &nbsp; &nbsp; &nbsp; input: textFieldStyles.input,&nbsp; &nbsp; &nbsp; &nbsp; notchedOutline: textFieldStyles.notchedOutline&nbsp; &nbsp; }}}