React MUI IconButton API

React MUI 是一个UI库，为React提供了预定义的强大和可定制的组件，以便更轻松地进行Web开发。MUI设计基于Google的Material Design。Material-UI是一个用户界面库，它提供了预定义和可定制的React组件，以便更快速和简便地进行Web开发，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论 React MUI IconButton API 。IconButton允许用户在应用程序中添加图标。图标通常在每个应用程序中用于UI目的。

导入IconButton API:

import IconButton from '@mui/material/IconButton'

Props列表：

children： 用于表示图标。
classes： 用于覆盖或扩展应用于组件的样式。
color： 用于表示组件的颜色。
disabled： 用于禁用组件。
disableFocusRipple： 用于禁用键盘焦点涟漪效果。
disableRipple： 用于禁用涟漪效果。
edge： 用于将内容与图标对齐。
size： 用于表示组件的大小。
sx： 用于向图标按钮添加自定义CSS样式。

CSS规则：

root (MuiDivider-root)： 应用于根元素的样式。
edgeStart (MuiIconButton-edgeStart)： 当边缘是开始时应用于根的样式。
edgeEnd (MuiIconButton-edgeEnd)： 当边缘是结束时应用于根的样式。
colorInherit (MuiIconButton-colorInherit)： 当颜色是继承时应用于根的样式。
colorPrimary (MuiIconButton-colorPrimary)： 当颜色是主要时应用于根的样式。
colorSecondary (MuiIconButton-colorSecondary)： 当颜色是次要时应用于根的样式。
disabled (Mui-disabled)： 当禁用为true时应用于根的样式。
sizeSmall (MuiIconButton-sizeSmall)： 当大小为小号时应用于根的样式。
sizeMedium (MuiIconButton-sizeMedium)： 当大小为中号时应用于根的样式。
sizeLarge (MuiIconButton-sizeLarge)： 当大小为大号时应用于根的样式。

做法： 让我们创建一个React项目并安装React MUI模块。然后我们将创建一个展示React MUI IconButton API的UI。

创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npx命令安装React模块。使用“npx”而不是“npm”，因为您在应用程序的生命周期中只需要使用此命令一次。

npx create-react-app project_name

步骤2： 创建React项目后，进入文件夹执行不同操作。

cd project_name

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

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

项目结构：

在完成上述步骤中提到的命令后，如果您在编辑器中打开项目，您会看到一个类似下面所示的项目结构。新增的用户组件或代码更改将在源文件夹中完成。
React MUI IconButton API

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

npm start

示例1： 我们正在创建一个UI，展示React MUI IconButton API。

App.js

import * as React from 'react'; 
import IconButton from '@mui/material/IconButton'; 
import WifiIcon from '@mui/icons-material/Wifi'; 
import CreateIcon from '@mui/icons-material/Create'; 
import BuildIcon from '@mui/icons-material/Build'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100, textAlign: "center" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI IconButton API</u></h3> 
            <br /> 
            <IconButton color="error" size="large"> 
               <WifiIcon /> 
            </IconButton> 
            <IconButton color="success" size="large"> 
              <CreateIcon /> 
            </IconButton> 
            <IconButton color="primary" size="large"> 
               <BuildIcon /> 
            </IconButton> 
        </div> 
    ); 
}

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

React MUI IconButton API

示例2： 我们正在创建一个显示React MUI IconButton API的UI界面。

App.js

import * as React from 'react'; 
import IconButton from '@mui/material/IconButton'; 
import TvIcon from '@mui/icons-material/LiveTv'; 
import BoltIcon from '@mui/icons-material/Bolt'; 
import BluetoothIcon from '@mui/icons-material/BluetoothSearching'; 
import WbCloudy from '@mui/icons-material/WbCloudy'; 
export default function Demo() { 
    return ( 
        <div style={{ margin: 100, textAlign: "center" }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI IconButton API</u></h3> 
            <br /> 
            <IconButton color="secondary" size="small"> 
               <WbCloudy /> 
            </IconButton> 
            <IconButton color="secondary" size="small"
               ><BluetoothIcon /> 
            </IconButton> 
            <IconButton color="success" size="large"> 
               <TvIcon /> 
            </IconButton> 
            <IconButton color="success" size="large"> 
               <BoltIcon /> 
            </IconButton> 
        </div> 
    ); 
}

输出: 现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：

React MUI IconButton API