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

InputAPI

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

範例

匯入

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

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

Props

名稱類型預設描述
classNamestring-

套用至根元素的類別名稱。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的主題顏色。

若要了解如何新增自己的顏色，請查看主題元件—擴充顏色。

endDecoratornode-

此輸入的尾隨裝飾。

errorboolfalse

如果 true，input 將指示錯誤。此 prop 預設為從父 FormControl 元件繼承的值 (false)。

fullWidthboolfalse

如果 true，輸入將佔用其容器的完整寬度。

size'sm'
| 'md'
| 'lg'
| string		'md'

元件的大小。

若要了解如何將自訂大小新增至元件，請查看主題元件—擴充大小。

startDecoratornode-

此輸入的前導裝飾。

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

系統 prop，允許定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'outlined'

要使用的全域變體。

若要了解如何新增自己的變體，請查看主題元件—擴充變體。

ref 已轉發至根元素。

主題預設 props

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

插槽

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

插槽名稱類別名稱預設元件描述
root.MuiInput-root'div'呈現根元件的元件。
input.MuiInput-input'input'呈現輸入的元件。
startDecorator.MuiInput-startDecorator'div'呈現開始裝飾器的元件。
endDecorator.MuiInput-endDecorator'div'呈現結束裝飾器的元件。

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true}，則套用至根元素的類別名稱。
.Mui-error如果 error={true}，則套用至根元素的狀態類別。
.Mui-focused如果元件處於焦點狀態，則套用至根元素的類別名稱。
.MuiInput-colorContextcolorContext當觸發顏色反轉時，套用至根元素的類別名稱。
.MuiInput-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiInput-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiInput-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiInput-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiInput-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiInput-formControlformControl如果元件是 FormControl 的後代，則套用至根元素的類別名稱。
.MuiInput-fullWidthfullWidth如果 fullWidth={true}，則套用至根元素的類別名稱。
.MuiInput-sizeLgsizeLg如果 size="lg"，則套用至根元素的類別名稱。
.MuiInput-sizeMdsizeMd如果 size="md"，則套用至根元素的類別名稱。
.MuiInput-sizeSmsizeSm如果 size="sm"，則套用至根元素的類別名稱。
.MuiInput-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的類別名稱。
.MuiInput-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的類別名稱。
.MuiInput-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的類別名稱。
.MuiInput-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的類別名稱。

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

原始碼

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