OptionAPI

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

示範

有關此 React 組件用法的範例和詳細資訊，請造訪組件示範頁面

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

也提供原生組件的 Props。

名稱	類型	預設	描述
value*	any	-	選項值。
children	node	-	組件的內容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	組件的顏色。它支援適用於此組件的那些主題顏色。若要了解如何新增自己的顏色，請查看主題組件—擴充顏色。
disabled	bool	false	如果為 `true`，則會停用組件。
label	element \| string	-	選項內容的文字表示形式。用於鍵盤文字導航比對。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。有關更多詳細資訊，請參閱 `sx` 頁面。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'plain'	要使用的全域 variant。若要了解如何新增自己的 variants，請查看主題組件—擴充 variants。

組件無法持有 ref。

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

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

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

類別名稱	規則名稱	描述
.Mui-disabled		如果 `disabled={true}`，則套用至 root 元素的狀態類別。
.Mui-selected		如果選項已選取，則套用至 root 元素的狀態類別。
.MuiOption-colorContext	colorContext	如果 `color="context"`，則套用至 root 元素的類別名稱。
.MuiOption-colorDanger	colorDanger	如果 `color="danger"`，則套用至 root 元素的類別名稱。
.MuiOption-colorNeutral	colorNeutral	如果 `color="neutral"`，則套用至 root 元素的類別名稱。
.MuiOption-colorPrimary	colorPrimary	如果 `color="primary"`，則套用至 root 元素的類別名稱。
.MuiOption-colorSuccess	colorSuccess	如果 `color="success"`，則套用至 root 元素的類別名稱。
.MuiOption-colorWarning	colorWarning	如果 `color="warning"`，則套用至 root 元素的類別名稱。
.MuiOption-highlighted	highlighted	如果選項已反白顯示，則套用至 root 元素的狀態類別。
.MuiOption-variantOutlined	variantOutlined	如果 `variant="outlined"`，則套用至 root 元素的狀態類別。
.MuiOption-variantPlain	variantPlain	如果 `variant="plain"`，則套用至 root 元素的狀態類別。
.MuiOption-variantSoft	variantSoft	如果 `variant="soft"`，則套用至 root 元素的狀態類別。
.MuiOption-variantSolid	variantSolid	如果 `variant="solid"`，則套用至 root 元素的狀態類別。

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

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