Chip（晶片）API
React Chip 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import Chip from '@mui/joy/Chip';
// or
import { Chip } from '@mui/joy';了解差異，請閱讀這篇關於最小化套件大小的指南。
晶片以小方塊呈現複雜的實體，例如聯絡人。
原生組件的 props 也可用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children（子節點） | node | - | 組件的內容。 |
| color（顏色） | 'danger'（危險） | 'neutral'（中性） | 'primary'（主要） | 'success'（成功） | 'warning'（警告） | string（字串） | 'neutral'（中性） | 組件的顏色。它支援適用於此組件的主題顏色。 要了解如何新增自己的顏色，請查看主題組件 — 擴展顏色。 |
| component（組件） | elementType | - | 用於根節點的組件。可以是使用 HTML 元素的字串或組件。 |
| disabled（停用） | bool | false | 如果為 |
| endDecorator（尾端裝飾器） | node | - | 放置在子節點之後的元素。 |
| onClick | func | - | 元素動作點擊處理器。 |
| size（尺寸） | 'lg'（大型） | 'md'（中型） | 'sm'（小型） | string（字串） | 'md'（中型） | 組件的尺寸。它接受 'sm' 到 'lg' 之間的主題值。 要了解如何將自訂尺寸新增至組件，請查看主題組件 — 擴展尺寸。 |
| slotProps | { action?: func | object, endDecorator?: func | object, label?: func | object, root?: func | object, startDecorator?: func | object } | {} | 用於每個 slot 內部的 props。 |
| slots（插槽） | { action?: elementType, endDecorator?: elementType, label?: elementType, root?: elementType, startDecorator?: elementType } | {} | 用於每個 slot 內部的組件。 請參閱下方的 Slots API 以了解更多詳細資訊。 |
| startDecorator（前端裝飾器） | node | - | 放置在子節點之前的元素。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統屬性。 請參閱 `sx` 頁面 以了解更多詳細資訊。 |
| variant（變體） | 'outlined'（外框） | 'plain'（樸素） | 'soft'（柔和） | 'solid'（實心） | string（字串） | 'soft'（柔和） | 要使用的全域變體。 要了解如何新增自己的變體，請查看主題組件 — 擴展變體。 |
ref 會轉發到根元素。主題預設 props
您可以使用 JoyChip 來變更此組件的預設 props 透過主題。
要了解如何自訂插槽，請查看覆寫組件結構指南。
| 插槽名稱 | 類別名稱 | 預設組件 | 描述 |
|---|---|---|---|
| root（根元素） | .MuiChip-root | 'div' | 呈現根元素的組件。 |
| label（標籤） | .MuiChip-label | 'span' | 呈現標籤的組件。 |
| action（動作） | 'button' | 呈現動作的組件。 | |
| startDecorator（前端裝飾器） | .MuiChip-startDecorator | 'span' | 呈現前端裝飾器的組件。 |
| endDecorator（尾端裝飾器） | .MuiChip-endDecorator | 'span' | 呈現尾端裝飾器的組件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至組件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .Mui-disabled | 如果 disabled={true}，則套用至根元素的狀態類別。 | |
| .Mui-focusVisible | 如果鍵盤聚焦，則套用至根元素的狀態類別。 | |
| .MuiChip-colorContext | colorContext | 當觸發顏色反轉時，套用至根元素的類別名稱。 |
| .MuiChip-colorDanger | colorDanger | 如果 color="danger"，則套用至根元素的類別名稱。 |
| .MuiChip-colorNeutral | colorNeutral | 如果 color="neutral"，則套用至根元素的類別名稱。 |
| .MuiChip-colorPrimary | colorPrimary | 如果 color="primary"，則套用至根元素的類別名稱。 |
| .MuiChip-colorSuccess | colorSuccess | 如果 color="success"，則套用至根元素的類別名稱。 |
| .MuiChip-colorWarning | colorWarning | 如果 color="warning"，則套用至根元素的類別名稱。 |
| .MuiChip-labelLg | labelLg | 如果 size="lg"，則套用至標籤 span 元素的類別名稱。 |
| .MuiChip-labelMd | labelMd | 如果 size="md"，則套用至標籤 span 元素的類別名稱。 |
| .MuiChip-labelSm | labelSm | 如果 size="sm"，則套用至標籤 span 元素的類別名稱。 |
| .MuiChip-sizeLg | sizeLg | 如果 size="lg"，則套用至根元素的類別名稱。 |
| .MuiChip-sizeMd | sizeMd | 如果 size="md"，則套用至根元素的類別名稱。 |
| .MuiChip-sizeSm | sizeSm | 如果 size="sm"，則套用至根元素的類別名稱。 |
| .MuiChip-variantOutlined | variantOutlined | 如果 variant="outlined"，則套用至根元素的類別名稱。 |
| .MuiChip-variantPlain | variantPlain | 如果 variant="plain"，則套用至根元素的類別名稱。 |
| .MuiChip-variantSoft | variantSoft | 如果 variant="soft"，則套用至根元素的類別名稱。 |
| .MuiChip-variantSolid | variantSolid | 如果 variant="solid"，則套用至根元素的類別名稱。 |
您可以使用以下其中一種自訂選項來覆寫組件的樣式
- 使用全域類別名稱。
- 在自訂主題中使用規則名稱作為組件
styleOverrides屬性的一部分。
原始碼
如果您在本頁中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。