React MUI CardActionArea API

React MUI 是一个UI库，提供了功能齐全的组件，将我们自己的设计系统带到了我们的成熟组件中。MUI是一个用户界面库，提供了预定义和可自定义的React组件，用于更快速和简单的Web开发，这些Material-UI组件基于谷歌的Material Design。

在本文中，我们将讨论React MUI CardActionArea API。卡片组件包含有关单个主题的内容和操作，最常用于Web应用程序。

导入CardActionArea API：

import CardActionArea from '@mui/material/CardActionArea';
import { CardActionArea } from '@mui/material';

属性列表:

children: 它用于表示卡片的内容。
classes: 用于覆盖或扩展应用于组件的样式。
sx: 用于向卡片添加自定义CSS样式。

CSS规则:

root (MuiCardActionArea-root): 应用于根元素的样式。
focusVisible (Mui-focusVisible): 如果操作区域获得键盘焦点，则应用样式于ButtonBase的根元素。
focusHighlight (MuiCardActionArea-focusHighlight): 当操作区域获得键盘焦点时，应用样式于覆盖操作区域的叠加层。

创建React项目:

步骤1: 通过npm命令安装React模块以创建React应用。

npm create-react-app project name

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

cd project name

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

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

项目结构：

React MUI CardActionArea API

运行应用程序的步骤：打开终端并输入以下命令。

npm start

示例1: 以下示例演示了React MUI CardActionArea API。

以下示例覆盖了整个卡片作为主要的卡片操作区域。

import { 
    Card, 
    CardActionArea, 
    CardContent, 
    CardMedia, 
} from "@mui/material"; 
import * as React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI CardActionArea API</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <Card sx={{ maxWidth: 345 }}> 
                    <CardActionArea> 
                        <CardMedia 
                            component="img"
                            height="180"
                            image= 
 "https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                            alt="gfg"
                        /> 
                        <CardContent> 
                            <h1>GeeksforGeeks</h1> 
                            <p style={{ fontSize: 18 }}>Welcome to the geeks world!</p> 
                        </CardContent> 
                    </CardActionArea> 
                </Card> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI CardActionArea API

示例2：下面的示例演示了React MUI CardActionArea API。

下面的示例显示了主要操作区与补充操作区分开，以避免事件重叠。

import { 
    Button, 
    Card, 
    CardActionArea, 
    CardActions, 
    CardContent, 
    CardMedia, 
} from "@mui/material"; 
import * as React from "react"; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1> 
                <h2>React MUI CardActionArea API</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <Card sx={{ maxWidth: 345 }}> 
                    <CardActionArea> 
                        <CardMedia 
                            component="img"
                            height="180"
                            image= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                            alt="gfg"
                        /> 
                        <CardContent> 
                            <h1>GeeksforGeeks</h1> 
                            <p style={{ fontSize: 18 }}> 
                                Welcome to the geeks world! 
                             </p> 
                        </CardContent> 
                    </CardActionArea> 
                    <CardActions> 
                        <Button>Visit</Button> 
                    </CardActions> 
                </Card> 
            </div> 
        </center> 
    ); 
} 
  
export default App;