MenuListAPI

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

示範

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

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

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
actions	ref	-	具有命令式 actions 的 ref。它允許選取第一個或最後一個選單項目。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	元件的色彩。它支援此元件適用的主題色彩。若要瞭解如何新增自己的色彩，請查看主題元件—擴充色彩。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
onItemsChange	func	-	當選單中顯示的項目變更時呼叫的函式。
size	'sm' \| 'md' \| 'lg' \| string	'md'	元件的大小 (會影響其他巢狀 list* 元件，因為 `Menu` 繼承 `List`)。若要瞭解如何將自訂大小新增至元件，請查看主題元件—擴充大小。
slotProps	{ root?: func \| object }	{}	用於內部每個 slot 的 props。
slots	{ root?: elementType }	{}	用於內部每個 slot 的元件。請參閱下方的Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的全域 variant。若要瞭解如何新增自己的 variants，請查看主題元件—擴充 variants。

ref 會轉發到根元素。

您可以使用 JoyMenuList 來變更此元件的預設 props 使用主題。

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

Slot 名稱	Class 名稱	預設元件	描述
root	.MuiMenuList-root	`'ul'`	呈現根的元件。

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

Class 名稱	規則名稱	描述
.MuiMenuList-colorContext	colorContext	當觸發色彩反轉時，套用至根元素的 Class 名稱。
.MuiMenuList-colorDanger	colorDanger	如果 `color="danger"`，則套用至根元素的 Class 名稱。
.MuiMenuList-colorNeutral	colorNeutral	如果 `color="neutral"`，則套用至根元素的 Class 名稱。
.MuiMenuList-colorPrimary	colorPrimary	如果 `color="primary"`，則套用至根元素的 Class 名稱。
.MuiMenuList-colorSuccess	colorSuccess	如果 `color="success"`，則套用至根元素的 Class 名稱。
.MuiMenuList-colorWarning	colorWarning	如果 `color="warning"`，則套用至根元素的 Class 名稱。
.MuiMenuList-sizeLg	sizeLg	如果 `size="lg"`，則套用至根元素的 Class 名稱。
.MuiMenuList-sizeMd	sizeMd	如果 `size="md"`，則套用至根元素的 Class 名稱。
.MuiMenuList-sizeSm	sizeSm	如果 `size="sm"`，則套用至根元素的 Class 名稱。
.MuiMenuList-variantOutlined	variantOutlined	如果 `variant="outlined"`，則套用至根元素的 Class 名稱。
.MuiMenuList-variantPlain	variantPlain	如果 `variant="plain"`，則套用至根元素的 Class 名稱。
.MuiMenuList-variantSoft	variantSoft	如果 `variant="soft"`，則套用至根元素的 Class 名稱。
.MuiMenuList-variantSolid	variantSolid	如果 `variant="solid"`，則套用至根元素的 Class 名稱。

您可以使用以下自訂選項之一覆寫元件的樣式

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