React MUI数据展示组件

React Material-UI（MUI） 是一个流行的库，为React应用程序提供一组可重用的组件，用于构建用户界面。这些组件基于Material Design，这是由Google开发的一个设计系统，提供了创建外观精美、用户友好的界面的指南。

数据展示组件 为您基于Material-UI的应用程序提供一种方便而一致的方式来显示数据和信息。

MUI提供了各种类型的数据展示组件：

组件	描述
Avatar	这个组件允许你以圆形或正方形的格式显示用户的个人资料图片或图标。
Badge	这个组件是一个小型的圆形组件，用于显示通知计数或状态指示器。
Chip	这个组件提供了一种紧凑且可点击的元素，用于显示小块信息，比如标签、标签或联系信息。
Divider	这个组件是一个用于将内容分成不同部分的水平线。分隔符可用于创建内容之间的视觉分隔。
图标	MUI提供了各种图标，可用于您的应用程序中使用。
Material图标	Material图标是由Google创建的一组图标，设计用于Material Design应用程序中使用。
列表	此组件允许您显示一个具有特定详细信息或操作的项目列表。
表格	此组件允许您以网格格式显示表格数据，并具有可选的排序、分页和选择功能。
工具提示	这个组件提供了一种显示用户悬停在元素上时的附加信息或上下文的方式。
排版	此组件提供了一组文本样式，可用于显示标题、正文文本和其他类型的内容。

创建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数据展示组件

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

npm start

示例1： 我们正在创建一个显示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数据展示组件