材质自动完成不适用于 InputProps

Posted 2023-02-22

【中文标题】材质自动完成不适用于 InputProps

【英文标题】：Material Autocomplete does not work with InputProps

【发布时间】：2020-03-06 13:11:43

【问题描述】：

我正在尝试更改通过我的Autocomplete 呈现的TextField 的边框，但是当我添加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 s，选择或输入项目时。

谢谢

【参考方案1】：

这是因为 InputProps 属性覆盖了 params 的 InputProps 参数，你必须合并 params 的 InputProps 属性：

InputProps=
    ...params.InputProps,
    classes: 
        input: textFieldStyles.input,
        notchedOutline: textFieldStyles.notchedOutline