切換API

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

示範

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

匯入

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

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

屬性

IconButton 組件的屬性也可用。

名稱	類型	預設	描述
checked	bool	-	如果 `true`，則組件會被核取。
checkedIcon	node	-	當組件被核取時要顯示的圖示。
classes	object	-	覆寫或擴展應用於組件的樣式。有關更多詳細資訊，請參閱下方的CSS 類別 API。
color	'default' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'primary'	組件的顏色。它支援預設和自訂主題顏色，可以按照調色盤自訂指南中所示的方式新增。
defaultChecked	bool	-	預設的核取狀態。當組件不受控制時使用。
disabled	bool	-	如果 `true`，則組件會停用。
disableRipple	bool	false	如果 `true`，則會停用漣漪效果。
edge	'end' \| 'start' \| false	false	如果給定，則使用負邊距來抵消一側的 padding（這通常有助於將圖示的左側或右側與上方或下方的內容對齊，而不會破壞邊框大小和形狀）。
icon	node	-	當組件未核取時要顯示的圖示。
id	string	-	`input` 元素的 id。
inputProps	object	-	應用於 `input` 元素的屬性。已棄用－請改用 `slotProps.input`。此屬性將在 v7 中移除。請參閱從已棄用的 API 遷移以了解更多詳細資訊。
inputRef	ref	-	將 ref 傳遞給 `input` 元素。已棄用－請改用 `slotProps.input.ref`。此屬性將在 v7 中移除。請參閱從已棄用的 API 遷移以了解更多詳細資訊。
onChange	func	-	當狀態變更時觸發的回呼。簽名:`function(event: React.ChangeEvent<htmlinputelement>) => void</htmlinputelement>` `event` 回呼的事件來源。您可以透過存取 `event.target.value` (字串) 來取出新值。您可以透過存取 `event.target.checked` (布林值) 來取出新的核取狀態。
required	bool	false	如果 `true`，則 `input` 元素為必填。
size	'medium' \| 'small' \| string	'medium'	組件的大小。`small` 等同於 dense switch 樣式。
slotProps	{ input?: func \| object, root?: func \| object, switchBase?: func \| object, thumb?: func \| object, track?: func \| object }	{}	用於每個內部插槽的 props。
slots	{ input?: elementType, root?: elementType, switchBase?: elementType, thumb?: elementType, track?: elementType }	{}	用於每個內部插槽的組件。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
value	any	-	組件的值。DOM API 將其轉換為字串。瀏覽器使用 "on" 作為預設值。

ref 轉發到根元素。

繼承

雖然上面沒有明確記錄，但 IconButton 組件的屬性在 Switch 中也可用。您可以利用這一點來 target 巢狀組件。

插槽

插槽名稱	類別名稱	預設組件	描述
root	.MuiSwitch-root	`'span'`	渲染 root 插槽的組件。
track	.MuiSwitch-track	`'span'`	渲染 track 插槽的組件。
thumb	.MuiSwitch-thumb	`'span'`	渲染 thumb 插槽的組件。
switchBase	.MuiSwitch-switchBase	`SwitchBase`	渲染 switchBase 插槽的組件。
input	.MuiSwitch-input	`SwitchBaseInput`	渲染 switchBase 的 input 插槽的組件。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-checked		應用於內部 `SwitchBase` 組件的 `checked` 類別的狀態類別。
.Mui-disabled		應用於內部 SwitchBase 組件的 disabled 類別的狀態類別。
.MuiSwitch-colorPrimary	colorPrimary	如果 `color="primary"`，則應用於內部 SwitchBase 組件的 root 元素的樣式。
.MuiSwitch-colorSecondary	colorSecondary	如果 `color="secondary"`，則應用於內部 SwitchBase 組件的 root 元素的樣式。
.MuiSwitch-edgeEnd	edgeEnd	如果 `edge="end"`，則應用於 root 元素的樣式。
.MuiSwitch-edgeStart	edgeStart	如果 `edge="start"`，則應用於 root 元素的樣式。
.MuiSwitch-sizeMedium	sizeMedium	如果 `size="medium"`，則應用於 root 元素的樣式。
.MuiSwitch-sizeSmall	sizeSmall	如果 `size="small"`，則應用於 root 元素的樣式。

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

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

原始碼

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