React MUI Avatar组件

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

在本文中，我们将讨论 React MUI Avatar Display 。头像用于表示不同形状和背景颜色的字母、图标和图像。

头像的类型：

图像头像： 用于表示图像作为头像的内容。
字母头像： 用于表示字符作为头像的内容。
图标头像： 用于表示图标作为头像的内容。
头像大小： 用于表示头像的高度和宽度。
头像变体： 用于表示不同的头像变体。
头像组： 用于将不同的头像分组，以便用户进行交互。
备用头像： 当图像无法加载时，使用替代文本或图标作为头像的内容。
徽章头像： 用于在头像的内容中添加徽章。

方法： 让我们创建一个React项目并安装React MUI模块。然后，我们将创建一个UI，展示 React MUI Avatar组件 。

创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npx命令安装React模块。

npx create-react-app project_name

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

cd project_name

步骤3：

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

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

项目结构： 在运行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似下面所示的项目结构。新组件用户创建或代码更改将在源文件夹中进行。

React MUI Avatar组件

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

npm start

示例1： 我们正在创建一个UI，显示React MUI Avatar Data Display组件。

文件名： App.js

import * as React from 'react'; 
import Avatar from '@mui/material/Avatar'; 
import BuildIcon from '@mui/icons-material/Build'; 
import WifiIcon from '@mui/icons-material/Wifi'; 
import CreateIcon from '@mui/icons-material/Create'; 
import { Stack } from '@mui/material'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
              
            <h3><u>React MUI Avatar Display</u></h3> 
              
            Image Avatar:<br /><br /> 
              
            <Stack direction="row" spacing={2}> 
                <Avatar sx={{ width: 60, height: 60 }} src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> 
                <Avatar variant="square" 
                    sx={{ width: 60, height: 60 }} src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> 
            </Stack> 
  
            <br />Icon Avatar:<br /><br /> 
              
            <Stack direction="row" spacing={2}> 
                <Avatar 
                    sx={{  
                        bgcolor: "green",  
                        width: 40,  
                        height: 40  
                    }}> 
                    <BuildIcon /> 
                </Avatar> 
                <Avatar variant="square"
                    sx={{  
                        bgcolor: "green",  
                        width: 50,  
                        height: 50  
                    }}> 
                    <CreateIcon /> 
                </Avatar> 
                <Avatar 
                    sx={{  
                        bgcolor: "green",  
                        width: 60,  
                        height: 60  
                    }}> 
                    <WifiIcon /> 
                </Avatar> 
            </Stack> 
        </div> 
    ); 
}

输出：

React MUI Avatar组件

示例2： 我们正在创建一个显示React MUI Avatar数据显示组件的用户界面。

文件名： App.js

import * as React from 'react'; 
import Avatar from '@mui/material/Avatar'; 
import AvatarGroup from '@mui/material/AvatarGroup'; 
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}> 
                GeeksforGeeks 
            </h1> 
              
            <h3><u>React MUI Avatar Display</u></h3> 
              
            <AvatarGroup total={10}  
                max={5} sx={{ maxWidth: "200px" }} 
                spacing="medium"> 
                <Avatar sx={{ bgcolor: "red" }}>
                    # 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    G 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    F 
                </Avatar> 
                <Avatar sx={{ bgcolor: "green" }}> 
                    G 
                </Avatar> 
            </AvatarGroup> 
        </div> 
    ); 
}

输出：

React MUI Avatar组件