React MUI开关输入

React Material UI 是一个流行的预构建UI组件库，可用于创建现代和响应式的Web应用程序。其中之一是Switch输入，它是一种表单输入，允许用户在两种状态之间切换，通常为“开”和“关”。

在本文中，我们将更详细地了解React MUI开关输入的功能，包括如何在代码中使用它以及一些自定义外观的技巧。

React MUI开关输入的特点：
React MUI中的Switch输入组件提供了一种时尚和用户友好的方式来向用户呈现二进制选项。它由一个小的、圆形的切换按钮组成，用户点击或点击它时，按钮从一侧滑到另一侧。React MUI开关输入组件的一些主要特点包括：

标签： 我们可以使用FormControlLabel组件给开关命名一个标签。
大小： 我们可以使用此属性编辑开关的大小。
颜色： 我们可以使用此属性编辑开关的颜色。
受控： 在受控模式下，开关的状态由父组件管理。
标签位置： 您可以更改标签的位置，可以将其放置在顶部、末尾、开始和底部。
FormGroup： FormGroup可以用于将多个开关组件组合在一起并管理其布局和验证。
自定义： 我们可以使用图标、管理状态等来自定义开关。

语法：

import Switch from '@mui/material/Switch';

步骤： 创建一个React项目并安装MUI模块。

创建React项目：

步骤1： 创建一个React应用，使用下面的命令。

npx create-react-app project_name

步骤2： 进入文件夹执行不同操作。

cd project_name

步骤3： 安装多语言用户界面（MUI）模块。

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/icons-material

项目结构：

React MUI开关输入

示例1： 开关输入的实现，带有变种。

import * as React from 'react'; 
import FormGroup from '@mui/material/FormGroup'; 
import FormControlLabel from '@mui/material/FormControlLabel'; 
import Switch from '@mui/material/Switch'; 
  
export default function SwitchLabels() { 
return ( 
<> 
    <div className="head" style={{width: "fit-content" , 
                                  margin: "auto" ,}}> 
        <h1 style={{color: "green" }}> 
            GeeksforGeeks 
        </h1> 
        <strong>React MUI Switch input</strong> 
        <br /> 
        <br /> 
  
        <FormGroup> 
            <FormControlLabel control={<Switch defaultChecked />}  
                                 label="defaultChecked switch" /> 
            <FormControlLabel control={<Switch />}  
                              label="Unchecked switch" /> 
            <FormControlLabel control={<Switch disabled />}  
                              label="Unchecked disabled switch" /> 
            <FormControlLabel control={<Switch defaultChecked disabled />}  
                              label="defaultChecked disabled switch" /> 
        </FormGroup> 
    </div> 
</> 
); 
}

输出：

React MUI开关输入

示例2： 使用彩色开关、大小和标签位置实现开关输入。

import * as React from 'react'; 
import FormGroup from '@mui/material/FormGroup'; 
import FormControlLabel from '@mui/material/FormControlLabel'; 
import Switch from '@mui/material/Switch'; 
  
export default function SwitchLabels() { 
return ( 
<> 
    <div className="head" style={{width: "fit-content" , 
                                  margin: "auto" ,}}> 
        <h1 style={{color: "green" }}> 
            GeeksforGeeks 
        </h1> 
        <strong>React MUI Switch input</strong> 
        <br /> 
        <br /> 
  
        <FormGroup> 
            <FormControlLabel labelPlacement="top" 
                              control={<Switch size="small" />}  
                              label="small switch" /> 
            <FormControlLabel control={<Switch size="medium" />}  
                              label="medium switch" /> 
            <FormControlLabel labelPlacement="start" 
                              control={<Switch size="medium" 
                              color="warning" />}  
                              label="orange switch" /> 
            <FormControlLabel labelPlacement="bottom" 
                              control={<Switch defaultChecked  
                              size="medium" 
                              color="secondary" /> 
            } label="defaultChecked switch" /> 
            <FormControlLabel control={<Switch defaultChecked disabled  
                              size="medium" 
                              color="warning" />}  
                              label="orange disabled switch" /> 
        </FormGroup> 
    </div> 
</> 
); 
}

输出：

React MUI开关输入