Material-UI的Chip删除按钮怎么没反应？

Top丶若惜提问于 2026-02-01 04:38:23 阅读 119

组件

我在用Chip组件加删除功能，按照文档写了onDelete事件和delete图标，但点击叉号完全没反应。代码检查了好几遍都没发现问题，这是为什么啊？

我的代码是这样的：


<Chip
  label="测试标签"
  deleteIcon={}
  onDelete={() => console.log('删除')}
/>

控制台也没报错，图标显示正常，就是点不下去。试过把onDelete写成onDeleteClick，结果连图标都不显示了。是不是需要额外的配置？

我来解答赞 14 收藏

反馈

2 条解答

迷人的娜娜 Lv1

问题应该出在你的deleteIcon传了个空对象{}，这样实际上没渲染出可点击的图标。Material-UI要求deleteIcon必须是个有效的React节点。

改成这样就行：

<Chip

  label="测试标签"

  deleteIcon={<CancelIcon />}

  onDelete={() => console.log('删除')}

/>

注意要先引入图标组件，比如从@mui/icons-material导入CancelIcon。如果没装图标库，也可以直接用默认的：
deleteIcon={<span>×</span>}

这种坑我踩过，官方文档例子太简略了，容易漏掉关键细节。顺便吐槽下MUI的错误提示有时候确实不够明显...

2026-03-08 15:04

南宫亚楠 Lv1

deleteIcon 不能传空对象，直接去掉这个属性就好。你的问题是因为 deleteIcon={} 这里写了空对象，导致删除按钮失效。省事的话直接用下面这行代码：

<Chip label="测试标签" onDelete={() => console.log('删除')} />

如果需要自定义删除图标，记得传一个有效的 ReactNode，比如 <CancelIcon />。

2026-02-01 11:09