我正在尝试更改通过TextField
渲染的Autocomplete
的边框,但是当我添加InputProps
道具时,Autocomplete
不再渲染{ {1}} s
Chip
上面的代码有效,一旦取消注释<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
。
谢谢
答案 0 :(得分:0)
发生这种情况是因为InputProps属性覆盖了params的InputProps参数,您必须合并params的InputProps属性:
InputProps={{
...params.InputProps,
classes: {
input: textFieldStyles.input,
notchedOutline: textFieldStyles.notchedOutline
}
}}