React MUI CardMedia API

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

在本文中，我们将讨论React MUI CardMediaAPI。Card组件允许用户在矩形框中显示与单个主题相关的内容。

导入CardMedia API：

import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia'

属性列表：

children： 用于指定卡片内容。
classes： 用于覆盖或扩展应用到组件的样式。
image： 用于指定卡片的背景图像。
src： 用于指定卡片媒体组件的路径。
sx： 用于向卡片添加自定义CSS样式。

CSS规则：

root（MuiCardMedia-root）： 应用于根元素的样式。
media（MuiCardMedia-media）： 如果组件是视频或音频，则应用于根元素的样式。
img（MuiCardMedia-img）： 如果组件是图像，则应用于根元素的样式。

实现方法：

让我们创建一个React项目并安装React MUI模块。然后我们将创建一个UI来展示React MUI CardMedia API。

创建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

项目结构 : 在完成上述步骤中提到的命令后，如果在编辑器中打开项目，你会看到一个类似下面展示的项目结构。新的组件“user”的创建或代码更改将在源文件夹中完成。

React MUI CardMedia API

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

npm start

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

import * as React from 'react'; 
import { Card, CardMedia, CardContent } from '@mui/material'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI CardMedia API</u></h3> 
            <Card raised={true} sx={{ maxWidth: 400 }}> 
                <CardMedia 
                    component="img"
                    height="200"
                    image= 
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png'
                    alt="GFG Logo"
                /> 
                <CardContent sx={{ bgcolor: "#E8E8E8" }}> 
                    <h3>DSA Self Paced Course</h3> 
                    <h4 style={{ color: "green" }}> 
                        Most popular course on DSA trusted by 
                        over 75,000 students! Built with years 
                        of experience by industry experts and 
                        gives you a complete package of video 
                        lectures, practice problems, quizzes, 
                        discussion forums and contests.<br /> 
                        Start Today ! 
                    </h4> 
                </CardContent> 
            </Card> 
        </div> 
    ); 
}

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

React MUI CardMedia API

示例2: 我们正在创建一个显示React MUI CardMedia API的UI。

import * as React from 'react'; 
import { Card, CardMedia } from '@mui/material'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI CardMedia API</u></h3> 
            <Card raised={true} style= 
                {{ textAlign: "center" }}> 
                <br /> 
                <CardMedia 
                    component="img"
                    sx={{ display: "flex", marginLeft: "auto",  
                    marginRight: "auto", maxWidth: 150 }} 
                    height="150"
                    image= 
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'
                    alt="GFG Logo"
                /> 
                <h3>Welcome to GFG !</h3> 
            </Card> 
        </div> 
    ); 
}

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

React MUI CardMedia API