React MUI FormGroup API

Material-UI 是一个用户界面框架，它提供了预定义和可定制的React组件，以便进行更快速和简单的网页开发。Material-UI组件基于Google的Material Design。在本文中，让我们讨论Material-UI库中的FormGroup API。

MUI提供的FormGroup API： FormGroup API用于包装控制元素，例如复选框和开关，并根据传递的props为它们提供紧凑的布局。

FormGroup props：

children： 表示元素中表示选项的
classes： 表示用于覆盖默认样式的样式。
row： 确定是否在单行中显示元素组。
sx： 表示一个系统属性，允许定义系统覆盖和额外的CSS样式。

创建React应用程序并安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2： 创建您的项目文件夹，即foldername，然后使用以下命令进入该文件夹：

cd foldername

步骤3： 在创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @mui/material

项目结构： 它将会呈现如下所示。

React MUI FormGroup API

运行应用程序的步骤 ：从项目的根目录使用以下命令运行应用程序：

npm start

示例1： 在这个示例中，我们将尝试创建一个简单的应用程序，该应用程序使用FormGroup组件来表示一组Checkbox组件。现在在App.js文件中写下以下代码。在这里，App是我们的默认组件，我们在这里编写了我们的代码：

App.js

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

输出： 现在打开你的浏览器，前往 http://localhost:3000/，你将看到以下输出：

React MUI FormGroup API

示例2: 在这个示例中，让我们创建一个简单的应用程序，使用FormGroup组件来表示一组Switch组件。将App.js更改为以下样式。

App.js

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 BasicButtonGroup() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI FormGroup API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <FormGroup> 
                    <FormControlLabel  
                        control={<Switch defaultChecked />} 
                        label="Label" /> 
                    <FormControlLabel disabled control={<Switch />} 
                        label="Disabled" /> 
                </FormGroup> 
            </div> 
        </div> 
    ); 
}