列表項目按鈕API

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

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

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

閱讀這份關於最小化 bundle 大小的指南，以瞭解差異。

ButtonBase 元件的 Props 也可使用。

名稱	類型	預設	描述
alignItems	'center' \| 'flex-start'	'center'	定義 `align-items` 樣式屬性。
autoFocus	bool	false	若為 `true`，列表項目會在首次掛載時取得焦點。當值從 false 變更為 true 時，也會觸發焦點。
children	node	-	若使用 `ListItemSecondaryAction`，則為元件的內容，且必須是最後一個子元素。
classes	object	-	覆寫或擴充套用至元件的樣式。詳情請參閱下方的 CSS 類別 API。
component	elementType	-	用於根節點的元件。可以是字串 (用於 HTML 元素) 或元件。
dense	bool	false	若為 `true`，則會使用專為鍵盤和滑鼠輸入設計的精簡垂直內距。此 prop 預設為繼承自父 List 元件的值。
disabled	bool	false	若為 `true`，則停用元件。
disableGutters	bool	false	若為 `true`，則移除左右內距。
divider	bool	false	若為 `true`，則在列表項目的底部新增 1px 的淺色邊框。
focusVisibleClassName	string	-	此 prop 可協助識別哪個元素具有鍵盤焦點。當元素透過鍵盤互動取得焦點時，將會套用類別名稱。它是 CSS :focus-visible 選取器的 polyfill。此處說明了使用此功能的理由。如果需要，可以使用 polyfill 將 `focus-visible` 類別套用至其他元件。
selected	bool	false	用於套用選取樣式。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，可定義系統覆寫以及其他 CSS 樣式。詳情請參閱 `sx` 頁面。

ref 會轉發到根元素。

雖然上方未明確記載，但 ButtonBase 元件的 props 也可在 ListItemButton 中使用。您可以善用此功能來鎖定巢狀元件。

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

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至內部 `component` 元素的狀態類別。
.Mui-focusVisible		套用至元件 `focusVisibleClassName` prop 的狀態類別。
.Mui-selected		若 `selected={true}`，則套用至根元素的狀態類別。
.MuiListItemButton-alignItemsFlexStart	alignItemsFlexStart	若 `alignItems="flex-start"`，則套用至元件元素的樣式。
.MuiListItemButton-dense	dense	若為 dense，則套用至元件元素的樣式。
.MuiListItemButton-divider	divider	若 `divider={true}`，則套用至內部 `component` 元素的樣式。
.MuiListItemButton-gutters	gutters	除非 `disableGutters={true}`，否則套用至內部 `component` 元素的樣式。
.MuiListItemButton-root	root	套用至根元素的樣式。

您可以使用下列其中一種客製化選項覆寫元件的樣式

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