【问题标题】:Material Autocomplete does not work with InputProps材质自动完成不适用于 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,选择或输入项目时。

谢谢

【问题讨论】:

    标签: javascript reactjs autocomplete material-ui textfield


    【解决方案1】:

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

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

    【讨论】:

      猜你喜欢
      • 2021-05-05
      • 2020-04-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-18
      • 2021-04-27
      • 1970-01-01
      • 2019-11-25
      相关资源
      最近更新 更多