React MUI Checkbox API

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

MUI提供的复选框API： 复选框API用于允许用户从一组项目中选择多个项目。

复选框属性：

checked: 确定组件是否已选择
checkedIcon: 当组件已选择时显示的图标
classes: 用于覆盖默认样式
color: 组件的颜色
defaultChecked: 确定组件是否默认已选择
disabled: 确定组件是否禁用
disableRipple: 确定组件上的水波纹效果是否禁用
icon: 当组件未选择时显示的图标
id: 输入元素的ID
indeterminate: 确定组件是否处于不确定状态
indeterminateIcon: 当组件处于不确定状态时显示的图标
inputProps: 应用于输入元素的属性列表
inputRef: 传递给输入元素的引用
onChange: 当复选框状态改变时触发的回调函数
required: 确定输入元素是否需要
size: 组件的大小
sx: 一个系统属性，允许定义系统覆盖以及其他CSS样式
value: 组件的值
创建React应用并安装模块：

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

npx create-react-app foldername

步骤2： 在创建好项目文件夹（即文件夹名称）之后，使用以下命令进入该文件夹：

cd foldername

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

npm install @mui/material

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

React MUI Checkbox API

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

npm start

示例1: 在这个示例中，我们将尝试创建一个简单的应用程序，显示不同状态的复选框组件列表。

现在在App.js文件中编写以下代码。这里，App是我们的默认组件，我们在这里编写了我们的代码：

文件名：App.js

import * as React from 'react'; 
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 Checkbox API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <Checkbox defaultChecked /> 
                <Checkbox /> 
                <Checkbox disabled /> 
                <Checkbox disabled checked /> 
            </div> 
        </div> 
    ); 
}

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

npm start

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

React MUI Checkbox API

示例2： 在这个示例中，让我们创建一个简单的应用程序，显示带有相应标签的复选框组件。将您的App.js更改为下面的内容。

import * as React from 'react'; 
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 Checkbox API</strong> 
                <br /> 
                <br /> 
            </div> 
            <div 
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <Checkbox color='secondary' /> 
                <Checkbox color='success' /> 
                <Checkbox color='default' /> 
                <Checkbox color='primary' /> 
            </div> 
        </div> 
    ); 
}

输出：

React MUI Checkbox API