开关

开关是 UI 元素，允许用户在两种状态之间进行选择，最常见的是开/关。

Switch API

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

原生组件的 Props 也可用。

名称	类型	默认值	描述
checked	bool	-	如果 `true`，则组件为选中状态。
className	string	-	应用于根元素上的类名。
defaultChecked	bool	-	默认选中状态。当组件不受控制时使用。
disabled	bool	-	如果 `true`，则组件被禁用。
onChange	func	-	状态更改时触发的回调函数。签名：`function(event: React.ChangeEvent) => void` `event` 回调的事件源。您可以通过访问 `event.target.value` (string) 来获取新值。您可以通过访问 `event.target.checked` (boolean) 来获取新的选中状态。
readOnly	bool	-	如果 `true`，则组件为只读。
required	bool	-	如果 `true`，则 `input` 元素为必填。
slotProps	{ input?: func \| object, root?: func \| object, thumb?: func \| object, track?: func \| object }	{}	用于 Switch 内部每个 slot 的 props。
slots	{ input?: elementType, root?: elementType, thumb?: elementType, track?: elementType \| null }	{}	用于 Switch 内部每个 slot 的组件。可以使用 HTML 元素字符串或组件。有关更多详细信息，请参阅下面的 Slots API。

ref 被转发到根元素。

要了解如何自定义 slot，请查看覆盖组件结构指南。

Slot 名称	类名	默认组件	描述
root	.base-Switch-root	`'span'`	渲染根组件的组件。
input	.base-Switch-input	`'input'`	渲染 input 组件的组件。
thumb	.base-Switch-thumb	`'span'`	渲染 thumb 组件的组件。
track	.base-Switch-track	`'span'`	渲染 track 组件的组件。

这些类名对于使用 CSS 进行样式设置很有用。当特定状态被触发时，它们会被应用到组件的 slot 上。