有没有办法更改 material ui 的自动完成组件上的关闭图标?
Is there a way to change the close icons on the autocomplete component of material ui?
我想更改图标,但希望保留点击时的功能。
有好的解决办法吗?
I want to change this Icon
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
)}
/>
有人可以帮我吗?
您可以使用自动完成的 ChipProps
更改它,因为该图标是 Chip 组件的一部分,并且可以通过 deleteIcon
属性
您可以通过一个函数来自定义Autocomplete使用的Chip组件的渲染
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
)}
/>
并且可以使用 deleteIcon
属性进一步自定义 Chip 组件
编辑:有关详细信息,请参阅 the API of the Autocomplete and the API of the Chip
我想更改图标,但希望保留点击时的功能。 有好的解决办法吗?
I want to change this Icon
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
)}
/>
有人可以帮我吗?
您可以使用自动完成的 ChipProps
更改它,因为该图标是 Chip 组件的一部分,并且可以通过 deleteIcon
属性
您可以通过一个函数来自定义Autocomplete使用的Chip组件的渲染
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
)}
/>
并且可以使用 deleteIcon
属性进一步自定义 Chip 组件
编辑:有关详细信息,请参阅 the API of the Autocomplete and the API of the Chip