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

AccordionGroupAPI

React AccordionGroup 組件的 API 參考文件。了解此匯出模組的屬性、CSS 和其他 API。

示範

匯入

import AccordionGroup from '@mui/joy/AccordionGroup';
// or
import { AccordionGroup } from '@mui/joy';

了解差異，請閱讀此關於最小化套件大小的指南。

屬性

原生組件的屬性也可用。

名稱類型預設值描述
childrennode-

用於在 AccordionGroup 內部呈現圖示或文字元素，如果未設定 src。這可以是元素，或僅僅是字串。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

組件的顏色。它支援適用於此組件的那些主題顏色。

若要了解如何新增自己的顏色，請查看主題組件—擴充顏色。

componentelementType-

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

disableDividerboolfalse

如果 true，則會隱藏 accordion 之間的分隔線。

size'sm'
| 'md'
| 'lg'
| string		'md'

組件的大小（影響其他巢狀 list* 組件）。

若要了解如何將自訂大小新增至組件，請查看主題組件—擴充大小。

slotProps{ root?: func
| object }		{}

用於每個插槽內部的屬性。

slots{ root?: elementType }{}

用於每個插槽內部的組件。

請參閱下方的插槽 API 以了解更多詳細資訊。

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

允許定義系統覆寫以及其他 CSS 樣式的系統屬性。

請參閱 `sx` 頁面 以了解更多詳細資訊。

transition{ expanded: string, initial: string }
| string		'0.2s ease'

Accordion 詳細資訊的 CSS 過渡效果。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的全域變體。

若要了解如何新增自己的變體，請查看主題組件—擴充變體。

ref 會轉發到根元素。

主題預設屬性

您可以使用 JoyAccordionGroup 來變更此組件的預設屬性使用主題。

插槽

若要了解如何自訂插槽，請查看覆寫組件結構指南。

插槽名稱類別名稱預設組件描述
root.MuiAccordionGroup-root'div'呈現根的組件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時應用於組件的插槽。

類別名稱規則名稱描述
.MuiAccordionGroup-colorContextcolorContext在觸發顏色反轉時應用於根元素的類別名稱。
.MuiAccordionGroup-colorDangercolorDanger如果 color="danger"，則應用於根元素的類別名稱。
.MuiAccordionGroup-colorNeutralcolorNeutral如果 color="neutral"，則應用於根元素的類別名稱。
.MuiAccordionGroup-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的類別名稱。
.MuiAccordionGroup-colorSuccesscolorSuccess如果 color="success"，則應用於根元素的類別名稱。
.MuiAccordionGroup-colorWarningcolorWarning如果 color="warning"，則應用於根元素的類別名稱。
.MuiAccordionGroup-sizeLgsizeLg如果 size="lg"，則應用於根元素的類別名稱。
.MuiAccordionGroup-sizeMdsizeMd如果 size="md"，則應用於根元素的類別名稱。
.MuiAccordionGroup-sizeSmsizeSm如果 size="sm"，則應用於根元素的類別名稱。
.MuiAccordionGroup-variantOutlinedvariantOutlined如果 variant="outlined"，則應用於根元素的類別名稱。
.MuiAccordionGroup-variantPlainvariantPlain如果 variant="plain"，則應用於根元素的類別名稱。
.MuiAccordionGroup-variantSoftvariantSoft如果 variant="soft"，則應用於根元素的類別名稱。
.MuiAccordionGroup-variantSolidvariantSolid如果 variant="solid"，則應用於根元素的類別名稱。

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

原始碼

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