When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly.
Here is the current code structure:
CSS:
customChip: {
"& svg": {
position: "relative",
display: "none",
},
"&:hover": {
"& svg": {
display: "block",
opacity: 1,
},
},
JSX:
...
const CustomDeleteIcon = (
<Cancel/>
);
....
<Grid item key={index} className={classes.chipContainer}>
<Chip
size="small"
className={classes.customChip}
label={
<span style={{ whiteSpace: "initial" }}>{x.i}</span>
}
onDelete={(event) =>
this.handleChipDelete(event, index)
}
deleteIcon={CustomDeleteIcon}
/>
</Grid>