NativeSelectAPI

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

示範

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

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

<Select native /> 的替代方案，套件大小佔用空間更小。

Input 元件的 props 也可使用。

名稱	類型	預設值	描述
children	node	-	用於填充選取器的選項元素。可以是某些 `<option>` 元素。
classes	object	{}	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
IconComponent	elementType	ArrowDropDownIcon	顯示箭頭的圖示。
input	element	<Input />	`Input` 元素；不一定要是 material-ui 特定的 `Input`。
inputProps	object	-	屬性套用至 `select` 元素。
onChange	func	-	選取選單項目時觸發的回呼。簽名：`function(event: React.ChangeEvent) => void` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來提取新值。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
value	any	-	`input` 值。DOM API 將其轉換為字串。
variant	'filled' \| 'outlined' \| 'standard'	-	要使用的變體。

ref 會轉發到根元素。

雖然上方未明確記錄，但 Input 元件的 props 也可在 NativeSelect 中使用。您可以利用此優勢來鎖定巢狀元件。

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

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

類別名稱	規則名稱	描述
.Mui-disabled		狀態類別，套用至選取元件的 `disabled` 類別。
.Mui-error		狀態類別，套用至選取元件的 `error` 類別。
.MuiNativeSelect-filled	filled	如果 `variant="filled"`，則套用至選取元件的樣式。
.MuiNativeSelect-icon	icon	套用至圖示元件的樣式。
.MuiNativeSelect-iconFilled	iconFilled	如果 `variant="filled"`，則套用至圖示元件的樣式。
.MuiNativeSelect-iconOpen	iconOpen	如果彈出視窗開啟，則套用至圖示元件的樣式。
.MuiNativeSelect-iconOutlined	iconOutlined	如果 `variant="outlined"`，則套用至圖示元件的樣式。
.MuiNativeSelect-iconStandard	iconStandard	如果 `variant="standard"`，則套用至圖示元件的樣式。
.MuiNativeSelect-multiple	multiple	如果 `multiple={true}`，則套用至選取元件的樣式。
.MuiNativeSelect-nativeInput	nativeInput	套用至底層原生輸入元件的樣式。
.MuiNativeSelect-outlined	outlined	如果 `variant="outlined"`，則套用至選取元件的樣式。
.MuiNativeSelect-root	root	套用至根元素的樣式。
.MuiNativeSelect-select	select	套用至選取元件 `select` 類別的樣式。
.MuiNativeSelect-standard	standard	如果 `variant="standard"`，則套用至選取元件的樣式。

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

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