React MUI 卡片表面

React MUI 是一个提供完全加载的组件的UI库，将我们自己的设计系统带到可以用于生产的组件中。MUI是一个用户界面库，提供预定义和可自定义的React组件，用于更快速和简便的Web开发，这些Material-UI组件是基于Google的Material Design。

在本文中，我们将讨论 React MUI卡片表面 。卡片组件包含有关单个主题的内容和操作。卡片是在一个主题上显示内容和操作的表面。

MUI卡片表面的变体： 卡片表面有一个默认版本。其他变体如下：

基本卡片： 这是在react mui中的默认卡片。
- 轮廓卡片： 在这个变体中，会呈现一个有轮廓的卡片。
- 复杂交互： 在这个变体中，卡片是可展开的。
- 媒体： 这张卡片包含图片和链接。
- 主要操作： 这个变体允许用户与整个卡片组件进行交互，并触发主要操作。
- UI控制： 这张卡片包含图标、文本、UI控件等。
- API： Card组件的API如下：
<Card />
<CardActionArea />
<CardActions />
<CardContent />
<CardHeader />
<CardMedia />
<Collapse />
<Paper />

语法：

<Card>
    ...
<Card>

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

npm 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卡片表面组件。

import React from "react"; 
import Card from "@mui/material/Card"; 
import CardActions from "@mui/material/CardActions"; 
import CardContent from "@mui/material/CardContent"; 
import Button from "@mui/material/Button"; 
import Typography from "@mui/material/Typography"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ 
                textAlign: "center", 
                color: "green"
            }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Card Surface</h2> 
            </div> 
  
            <center> 
                <Card sx={{ width: 300 }}> 
                    <CardContent> 
                        <Typography 
                            sx= 
                            {{ 
                                fontSize: 24, 
                                fontWeight: 'bold', 
                                color: 'green'
                            }} 
                            color="text.secondary"
                        > 
                            GeeksforGeeks 
                        </Typography> 
                        <Typography> 
                            No.1 platform for coding in world. 
                        </Typography> 
                    </CardContent> 
                    <CardActions> 
                        <Button size="small" sx= 
                            {{ 
                                backgroundColor: 'green', 
                                color: "white"
                            }}> 
                            Visit 
                        </Button> 
                    </CardActions> 
                </Card> 
            </center> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI 卡片表面

示例2： 下面的示例演示了具有媒体和主要操作的React MUI卡片表面组件。在给定的示例中，卡片由图像组成，并且允许用户与整个表面进行交互，以触发其主要操作，无论是展开、链接到另一个屏幕，还是其他行为。

import React from "react"; 
import Card from "@mui/material/Card"; 
import CardActions from "@mui/material/CardActions"; 
import CardContent from "@mui/material/CardContent"; 
import CardActionArea from "@mui/material/CardActionArea"; 
import CardMedia from "@mui/material/CardMedia"; 
import Button from "@mui/material/Button"; 
import Typography from "@mui/material/Typography"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Card Surface</h2> 
            </div> 
  
            <center> 
                <Card sx={{ maxWidth: 345 }}> 
                    <CardActionArea > 
                        <CardMedia 
                            component="img"
                            height="140"
                            image= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                            alt="gfg"
                        /> 
                        <CardContent> 
                            <Typography gutterBottom variant="h5" 
                                component="div"> 
                                GeeksforGeeks 
                            </Typography> 
                            <Typography variant="body2" 
                                color="text.secondary"> 
                                A Computer Science portal for geeks.  
                                It contains well written, well  
                                thought and well explained computer  
                                science and programming articles. 
                            </Typography> 
                        </CardContent> 
                    </CardActionArea> 
                    <CardActions> 
                        <Button size="medium" color="success"> 
                            Visit 
                        </Button> 
                    </CardActions> 
                </Card> 
            </center> 
        </div> 
    ); 
} 
  
export default App;