InputAdornmentAPI

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

示範

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

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

原生元件的 props 也可使用。

名稱	類型	預設值	描述
position*	'end' \| 'start'	-	此裝飾應相對於 `Input` 出現的位置。
children	node	-	元件的內容，通常是 `IconButton` 或字串。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
component	elementType	-	用於根節點的元件。字串（用於 HTML 元素）或元件。
disablePointerEvents	bool	false	停用根節點上的指標事件。這允許裝飾的內容在點擊時聚焦 `input`。
disableTypography	bool	false	如果 children 是字串，則停用在 Typography 元件中包裝。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以取得更多詳細資訊。
variant	'filled' \| 'outlined' \| 'standard'	-	要使用的 variant。注意：如果您使用的是 `TextField` 元件或 `FormControl` 元件，則不必手動設定此項。

ref 會轉發到根元素。

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

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

類別名稱	規則名稱	描述
.MuiInputAdornment-disablePointerEvents	disablePointerEvents	如果 `disablePointerEvents={true}`，則套用至根元素的樣式。
.MuiInputAdornment-filled	filled	如果 `variant="filled"`，則套用至根元素的樣式。
.MuiInputAdornment-hiddenLabel	hiddenLabel	如果裝飾在內部使用，則套用樣式.
.MuiInputAdornment-outlined	outlined	如果 `variant="outlined"`，則套用至根元素的樣式。
.MuiInputAdornment-positionEnd	positionEnd	如果 `position="end"`，則套用至根元素的樣式。
.MuiInputAdornment-positionStart	positionStart	如果 `position="start"`，則套用至根元素的樣式。
.MuiInputAdornment-root	root	套用至根元素的樣式。
.MuiInputAdornment-sizeSmall	sizeSmall	如果裝飾在內部使用，則套用樣式.
.MuiInputAdornment-standard	standard	如果 `variant="standard"`，則套用至根元素的樣式。

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

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