材质自动完成不适用于 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={{

    ...params.InputProps,

    classes: {

        input: textFieldStyles.input,

        notchedOutline: textFieldStyles.notchedOutline

    }

}}