跳到内容跳到内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

ChipAPI

React Chip 组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

import Chip from '@mui/material/Chip';
// or
import { Chip } from '@mui/material';

通过阅读有关最小化 bundle size 的指南，了解其差异。



Chip（纸片）以小块形式表示复杂实体，例如联系人。

属性

原生组件的属性也可用。

名称类型默认描述
avatarelement-

要显示的 Avatar 元素。

childrenunsupportedProp-

不支持此属性。如果需要更改子级结构，请使用 component 属性。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的 CSS 类名 API。

clickablebool-

如果为 true，则 Chip 将显示为可点击，并且在按下时会升高，即使未定义 onClick 属性也是如此。如果为 false，则 Chip 将不会显示为可点击，即使定义了 onClick 属性也是如此。例如，这可以与 component 属性一起使用，以指示锚 Chip 是可点击的。注意：这控制 UI，但不影响 onClick 事件。

color'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'default'

组件的颜色。它同时支持默认主题颜色和自定义主题颜色，可以按照调色板定制指南中所示的方式添加自定义主题颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

deleteIconelement-

覆盖默认的删除图标元素。仅当设置了 onDelete 时显示。

disabledboolfalse

如果为 true，则组件被禁用。

iconelement-

Icon 元素。

labelnode-

组件的内容。

onDeletefunc-

单击删除图标时触发的回调。如果设置，将显示删除图标。

size'medium'
| 'small'
| string		'medium'

组件的大小。

skipFocusWhenDisabledboolfalse

如果为 true，则允许禁用的 Chip 避开焦点。如果为 false，则允许禁用的 Chip 接收焦点。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统属性。

有关更多详细信息，请参阅 `sx` 页面。

variant'filled'
| 'outlined'
| string		'filled'

要使用的变体。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiChip 通过主题更改此组件的默认属性。

CSS 类名

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的插槽上。

类名规则名称描述
.Mui-disabled如果 disabled={true}，则状态类应用于根元素。
.Mui-focusVisible如果键盘聚焦，则状态类应用于根元素。
.MuiChip-avataravatar样式应用于 avatar 元素。
.MuiChip-avatarColorPrimaryavatarColorPrimary如果 color="primary"，则样式应用于 avatar 元素。
.MuiChip-avatarColorSecondaryavatarColorSecondary如果 color="secondary"，则样式应用于 avatar 元素。
.MuiChip-avatarMediumavatarMedium如果 size="medium"，则样式应用于 avatar 元素。
.MuiChip-avatarSmallavatarSmall如果 size="small"，则样式应用于 avatar 元素。
.MuiChip-clickableclickable如果定义了 onClick 或 clickable={true}，则样式应用于根元素。
.MuiChip-clickableColorPrimaryclickableColorPrimary如果定义了 onClick 和 color="primary" 或 clickable={true}，则样式应用于根元素。
.MuiChip-clickableColorSecondaryclickableColorSecondary如果定义了 onClick 和 color="secondary" 或 clickable={true}，则样式应用于根元素。
.MuiChip-colorDefaultcolorDefault如果 color="default"，则样式应用于根元素。
.MuiChip-colorErrorcolorError如果 color="error"，则样式应用于根元素。
.MuiChip-colorInfocolorInfo如果 color="info"，则样式应用于根元素。
.MuiChip-colorPrimarycolorPrimary如果 color="primary"，则样式应用于根元素。
.MuiChip-colorSecondarycolorSecondary如果 color="secondary"，则样式应用于根元素。
.MuiChip-colorSuccesscolorSuccess如果 color="success"，则样式应用于根元素。
.MuiChip-colorWarningcolorWarning如果 color="warning"，则样式应用于根元素。
.MuiChip-deletabledeletable如果定义了 onDelete，则样式应用于根元素。
.MuiChip-deletableColorPrimarydeletableColorPrimary如果定义了 onDelete 和 color="primary"，则样式应用于根元素。
.MuiChip-deletableColorSecondarydeletableColorSecondary如果定义了 onDelete 和 color="secondary"，则样式应用于根元素。
.MuiChip-deleteIcondeleteIcon样式应用于 deleteIcon 元素。
.MuiChip-deleteIconColorPrimarydeleteIconColorPrimary如果 color="primary"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconColorSecondarydeleteIconColorSecondary如果 color="secondary"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconFilledColorPrimarydeleteIconFilledColorPrimary如果 color="primary" 且 variant="filled"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconFilledColorSecondarydeleteIconFilledColorSecondary如果 color="secondary" 且 variant="filled"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconMediumdeleteIconMedium如果 size="medium"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconOutlinedColorPrimarydeleteIconOutlinedColorPrimary如果 color="primary" 且 variant="outlined"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconOutlinedColorSecondarydeleteIconOutlinedColorSecondary如果 color="secondary" 且 variant="outlined"，则样式应用于 deleteIcon 元素。
.MuiChip-deleteIconSmalldeleteIconSmall如果 size="small"，则样式应用于 deleteIcon 元素。
.MuiChip-filledfilled如果 variant="filled"，则样式应用于根元素。
.MuiChip-filledPrimaryfilledPrimary如果 variant="filled" 且 color="primary"，则样式应用于根元素。
.MuiChip-filledSecondaryfilledSecondary如果 variant="filled" 且 color="secondary"，则样式应用于根元素。
.MuiChip-iconicon样式应用于 icon 元素。
.MuiChip-iconColorPrimaryiconColorPrimary如果 color="primary"，则样式应用于 icon 元素。
.MuiChip-iconColorSecondaryiconColorSecondary如果 color="secondary"，则样式应用于 icon 元素。
.MuiChip-iconMediumiconMedium如果 size="medium"，则样式应用于 icon 元素。
.MuiChip-iconSmalliconSmall如果 size="small"，则样式应用于 icon 元素。
.MuiChip-labellabel样式应用于 label span 元素。
.MuiChip-labelMediumlabelMedium如果 size="medium"，则样式应用于 label span 元素。
.MuiChip-labelSmalllabelSmall如果 size="small"，则样式应用于 label span 元素。
.MuiChip-outlinedoutlined如果 variant="outlined"，则样式应用于根元素。
.MuiChip-outlinedPrimaryoutlinedPrimary如果 variant="outlined" 且 color="primary"，则样式应用于根元素。
.MuiChip-outlinedSecondaryoutlinedSecondary如果 variant="outlined" 且 color="secondary"，则样式应用于根元素。
.MuiChip-rootroot样式应用于根元素。
.MuiChip-sizeMediumsizeMedium如果 size="medium"，则样式应用于根元素。
.MuiChip-sizeSmallsizeSmall如果 size="small"，则样式应用于根元素。

您可以使用以下定制选项之一覆盖组件的样式

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。