選取器 (Select)API

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

示範

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

選取器 (Select)

匯入

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

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

Props

OutlinedInput 元件的 Props 也可使用。

名稱	類型	預設值	描述
autoWidth	bool	false	如果 `true`，彈出視窗的寬度將根據選單內的項目自動設定，否則至少會是選取器輸入框的寬度。
children	node	-	用於填充選取器的選項元素。當 `native` 為 false 時，可以是某些 `MenuItem`，當 `native` 為 true 時，可以是 `option`。 ⚠️當 `native` 為 false 時，`MenuItem` 元素必須是直接子元素。
classes	object	{}	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
defaultOpen	bool	false	如果 `true`，元件最初是開啟的。當元件開啟狀態不受控制時使用（即未定義 `open` prop）。只有在 `native` prop 為 `false`（預設值）時才能使用。
defaultValue	any	-	預設值。當元件不受控制時使用。
displayEmpty	bool	false	如果 `true`，即使未選取任何項目，也會顯示值。為了顯示有意義的值，可以將函數傳遞給 `renderValue` prop，該函數會在未選取任何項目時傳回要顯示的值。 ⚠️ 使用此 prop 時，請確保標籤不會與空白顯示的值重疊。標籤應隱藏或強制縮小狀態。
IconComponent	elementType	ArrowDropDownIcon	顯示箭頭的圖示。
id	string	-	當 `native` 時，包裝器元素或 `select` 元素的 `id`。
input	element	-	`Input` 元素；不一定要是 material-ui 特定的 `Input`。
inputProps	object	-	屬性套用至 `input` 元素。當 `native` 為 `true` 時，屬性會套用至 `select` 元素。
label	node	-	請參閱 OutlinedInput#label
labelId	string	-	作為額外標籤的元素的 ID。選取器將由額外標籤和選取的值標記。
MenuProps	object	-	套用至 `Menu` 元素的 Props。
multiple	bool	false	如果 `true`，`value` 必須是陣列，且選單將支援多重選取。
native	bool	false	如果 `true`，元件會使用原生 `select` 元素。
onChange	func	-	選取選單項目時觸發的回呼。簽名：`function(event: SelectChangeEvent<value>, child?: object) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (any) 來取出新值。警告：這是一個通用事件，而不是變更事件，除非變更事件是由瀏覽器自動填寫引起的。 `child` 當 `native` 為 `false`（預設值）時選取的 react 元素。
onClose	func	-	當元件請求關閉時觸發的回呼。在受控模式（請參閱 `open` prop）或非受控模式中使用它（以偵測選取器何時收合）。簽名：`function(event: object) => void` `event` 回呼的事件來源。
onOpen	func	-	當元件請求開啟時觸發的回呼。在受控模式（請參閱 `open` prop）或非受控模式中使用它（以偵測選取器何時展開）。簽名：`function(event: object) => void` `event` 回呼的事件來源。
open	bool	-	如果 `true`，則顯示元件。只有在 `native` prop 為 `false`（預設值）時才能使用。
renderValue	func	-	渲染選取的值。只有在 `native` prop 為 `false`（預設值）時才能使用。簽名：`function(value: any) => ReactNode` `value` 提供給元件的 `value`。
SelectDisplayProps	object	-	套用至可點擊 div 元素的 Props。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及額外 CSS 樣式的系統 prop。請參閱 `sx` 頁面以取得更多詳細資訊。
value	'' \| any	-	`input` 值。提供空字串將不會選取任何選項。如果您不希望選取任何可用選項，請設定為空字串 `''`。如果值是物件，則它必須與選項具有參考相等性才能被選取。如果值不是物件，則字串表示必須與選項的字串表示相符才能被選取。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的變體。

ref 轉發到根元素。

繼承

雖然上面未明確記錄，但 OutlinedInput 元件的 props 也可在 Select 中使用。您可以利用這一點來目標巢狀元件。

主題預設 props

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

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		套用至選取器元件 `disabled` 類別的狀態類別。
.Mui-error		如果 `error={true}`，則套用至根元素的狀態類別。
.Mui-focused		如果選取器元件處於焦點狀態，則套用樣式。
.MuiSelect-filled	filled	如果 `variant="filled"`，則套用至選取器元件的樣式。
.MuiSelect-icon	icon	套用至圖示元件的樣式。
.MuiSelect-iconFilled	iconFilled	如果 `variant="filled"`，則套用至圖示元件的樣式。已棄用－請改為組合 .MuiSelect-icon 和 .MuiSelect-filled 類別。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
.MuiSelect-iconOpen	iconOpen	如果彈出視窗開啟，則套用至圖示元件的樣式。
.MuiSelect-iconOutlined	iconOutlined	如果 `variant="outlined"`，則套用至圖示元件的樣式。已棄用－請改為組合 .MuiSelect-icon 和 .MuiSelect-outlined 類別。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
.MuiSelect-iconStandard	iconStandard	如果 `variant="standard"`，則套用至圖示元件的樣式。已棄用－請改為組合 .MuiSelect-icon 和 .MuiSelect-standard 類別。請參閱從已棄用的 API 遷移以取得更多詳細資訊。
.MuiSelect-multiple	multiple	如果 `multiple={true}`，則套用至選取器元件的樣式。
.MuiSelect-nativeInput	nativeInput	套用至底層原生輸入元件的樣式。
.MuiSelect-outlined	outlined	如果 `variant="outlined"`，則套用至選取器元件的樣式。
.MuiSelect-root	root	套用至根元素的樣式。
.MuiSelect-select	select	套用至選取器元件 `select` 類別的樣式。
.MuiSelect-standard	standard	如果 `variant="standard"`，則套用至選取器元件的樣式。

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

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

原始碼

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