跳到主要內容跳到主要內容
🚀 影響 Material UI 的 2025 年藍圖！參與最新的開發者調查

ChipAPI

React Chip 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

匯入

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

若要瞭解差異，請閱讀此關於最小化 bundle 大小的指南。



Chip 以小方塊表示複雜的實體，例如聯絡人。

Props

原生元件的 props 也可用。

名稱類型預設描述
avatarelement-

要顯示的 Avatar 元素。

childrenunsupportedProp-

不支援此 prop。如果您需要變更 children 結構，請使用 component prop。

classesobject-

覆寫或擴充套用至元件的樣式。

如需更多詳細資訊，請參閱下方的CSS 類別 API。

clickablebool-

如果 true，即使未定義 onClick prop，chip 也會顯示為可點擊，並在按下時升高。如果 false，即使已定義 onClick prop，chip 也不會顯示為可點擊。例如，這可以與 component prop 一起使用，以指示錨點 Chip 是可點擊的。注意：這會控制 UI，且不會影響 onClick 事件。

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

元件的顏色。它同時支援預設和自訂主題顏色，可以按照調色盤自訂指南中所示的方式新增。

componentelementType-

用於根節點的元件。字串（用於 HTML 元素）或元件。

deleteIconelement-

覆寫預設的刪除圖示元素。僅在設定 onDelete 時顯示。

disabledboolfalse

如果 true，則元件停用。

iconelement-

圖示元素。

labelnode-

元件的內容。

onDeletefunc-

當點擊刪除圖示時觸發的回呼。如果設定，將會顯示刪除圖示。

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

元件的大小。

skipFocusWhenDisabledboolfalse

如果 true，允許停用的 chip 避開焦點。如果 false，允許停用的 chip 接收焦點。

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

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

如需更多詳細資訊，請參閱 `sx` 頁面。

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

要使用的 variant。

ref 轉發到根元素。

主題預設 props

您可以使用 MuiChip 透過主題變更此元件的預設 props。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱規則名稱描述
.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"，則套用至根元素的樣式。

您可以使用下列其中一個自訂選項來覆寫元件的樣式

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。