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

AutocompleteOptionAPI

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

範例

導入

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

透過閱讀這份關於最小化 bundle size 的指南，了解它們之間的差異。

Props

也提供原生組件的 Props。

名稱類型預設描述
color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

組件的顏色。它支援適用於此組件的 theme colors。

要了解如何新增您自己的顏色，請查看Themed components—Extend colors。

componentelementType-

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

slotProps{ root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ root?: elementType }{}

用於每個 slot 內部的組件。

請參閱下方的Slots API以了解更多詳細資訊。

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

這個系統 prop 允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 `sx` 頁面 以了解更多詳細資訊。

variant'contained'
| 'light'
| 'outlined'
| 'text'
| string		'plain'

要使用的global variant。

要了解如何新增您自己的 variants，請查看Themed components—Extend variants。

ref 會轉發到根元素。

主題預設 props

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

Slots

要了解如何客製化 slot，請查看Overriding component structure 指南。

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

CSS 類別

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

類別名稱規則名稱描述
.Mui-focused如果 focused，則應用於根元素的狀態類別。
.Mui-focusVisible如果 component 的 focusVisibleClassName prop 存在，則應用於該 prop 的狀態類別。
.MuiAutocompleteOption-colorContextcolorContext當觸發顏色反轉時，應用於根元素的類別名稱。
.MuiAutocompleteOption-colorDangercolorDanger如果 color="danger"，則應用於根元素的類別名稱。
.MuiAutocompleteOption-colorNeutralcolorNeutral如果 color="neutral"，則應用於根元素的類別名稱。
.MuiAutocompleteOption-colorPrimarycolorPrimary如果 color="primary"，則應用於根元素的類別名稱。
.MuiAutocompleteOption-colorSuccesscolorSuccess如果 color="success"，則應用於根元素的類別名稱。
.MuiAutocompleteOption-colorWarningcolorWarning如果 color="warning"，則應用於根元素的類別名稱。
.MuiAutocompleteOption-variantOutlinedvariantOutlined如果 variant="outlined"，則應用於根元素的狀態類別。
.MuiAutocompleteOption-variantPlainvariantPlain如果 variant="plain"，則應用於根元素的狀態類別。
.MuiAutocompleteOption-variantSoftvariantSoft如果 variant="soft"，則應用於根元素的狀態類別。
.MuiAutocompleteOption-variantSolidvariantSolid如果 variant="solid"，則應用於根元素的狀態類別。

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

原始碼

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