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

ListItemButtonAPI

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

示範

導入

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

閱讀本指南，瞭解關於最小化套件大小的差異。

Props

原生組件的 props 也可使用。

名稱類型預設值描述
actionfunc
| { current?: { focusVisible: func } }		-

用於命令式動作的 ref。目前僅支援 focusVisible() 動作。

autoFocusboolfalse

若為 true，則列表項目會在首次掛載期間取得焦點。如果值從 false 變更為 true，也會觸發焦點。

childrennode-

組件的內容。

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

組件的顏色。它支援對此組件有意義的那些主題色彩。

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

componentelementType-

用於根節點的組件。可以是字串以使用 HTML 元素或組件。

disabledboolfalse

若為 true，則停用組件。

focusVisibleClassNamestring-

此 prop 可以協助識別哪個元素具有鍵盤焦點。當元素透過鍵盤互動取得焦點時，將套用類別名稱。它是 CSS :focus-visible 選取器的 polyfill。此處說明了使用此功能的理由。如果需要，可以使用 polyfill 將 focus-visible 類別套用至其他組件。

orientation'horizontal'
| 'vertical'		'horizontal'

內容方向流。

selectedboolfalse

若為 true，則選取組件。

slotProps{ root?: func
| object }		{}

用於內部每個插槽的 props。

slots{ root?: elementType }{}

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

如需更多詳細資訊，請參閱下方的插槽 API。

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

系統 prop，允許定義系統覆寫以及其他 CSS 樣式。

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

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

要使用的全域 variant。

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

ref 會轉發到根元素。

主題預設 props

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

插槽

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

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

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true}，則套用至內部 component 元素的狀態類別。
.Mui-focusVisible套用至 component 的 focusVisibleClassName prop 的狀態類別。
.Mui-selected如果 selected={true}，則套用至根元素的狀態類別。
.MuiListItemButton-colorContextcolorContext如果 color="context"，則套用至根元素的類別名稱。
.MuiListItemButton-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiListItemButton-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiListItemButton-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiListItemButton-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiListItemButton-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiListItemButton-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的類別名稱。
.MuiListItemButton-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的狀態類別。
.MuiListItemButton-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的狀態類別。
.MuiListItemButton-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的狀態類別。
.MuiListItemButton-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的狀態類別。
.MuiListItemButton-verticalvertical如果 orientation="vertical"，則套用至根元素的類別名稱。

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

原始碼

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