選單API

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

範例展示

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

選單

匯入

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

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

Props

Popper 組件的 Props 也可使用。

名稱	類型	預設值	描述
actions	ref	-	具有命令式 actions 的 ref。它允許選擇第一個或最後一個選單項目。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning'	'neutral'	組件的顏色。它支援適用於此組件的 theme color。若要了解如何新增自己的顏色，請查看主題組件—擴展顏色。
component	elementType	-	用於根節點的組件。可以是字串 (使用 HTML 元素) 或組件。
disablePortal	bool	false	`children` 將位於父組件的 DOM 階層之下。
invertedColors	bool	false	如果 `true`，則具有隱含 color prop 的 children 會反轉其顏色，以符合組件的 variant 和 color。
keepMounted	bool	false	始終將 children 保留在 DOM 中。此 prop 在 SEO 情況下或當您想要最大化 Popper 的響應性時非常有用。
modifiers	Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>	-	Popper.js 基於「plugin-like」架構，其大多數功能都完全封裝在「modifiers」中。 modifier 是一個函數，每次 Popper.js 需要計算 popper 的位置時都會調用它。因此，modifiers 應具有非常高的效能，以避免瓶頸。若要了解如何建立 modifier，請閱讀 modifiers 文件。
onClose	func	-	當焦點離開選單且選單應關閉時觸發。
onItemsChange	func	-	當選單中顯示的項目變更時調用的函數。
open	bool	false	控制是否顯示選單。
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	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱`sx` 頁面以取得更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'outlined'	要使用的global variant。若要了解如何新增自己的 variant，請查看主題組件—擴展 variant。

ref 會轉發到根元素。

繼承

雖然上面未明確記錄，但 Popper 組件的 props 也可在 Menu 中使用。您可以利用此優勢來定位巢狀組件。

Slots

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

Slot 名稱	類別名稱	預設組件	描述
root	.MuiMenu-root	`'ul'`	呈現 root 的組件。

CSS 類別

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

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

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

使用全域類別名稱。
在自訂主題中，將規則名稱作為組件的 styleOverrides 屬性的一部分。

原始碼

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