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
项目结构:
运行应用程序的步骤:打开终端并输入以下命令。
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;
输出:
示例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;
输出:
参考: https://mui.com/material-ui/api/card-action-area/