React MUI CardActions API

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

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

导入CardActions API ：

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

属性列表 :

children : 用于指示卡片的内容。
classes : 用于覆盖或扩展应用于组件的样式。
disableSpacing : 接受布尔值以删除额外的边距。
sx : 用于向卡片添加自定义CSS样式。

CSS规则 :

root (MuiCardActions-root) : 应用于根元素的样式。
spacing (MuiCardActions-spacing) : 当disableSpacing为true时应用样式。

方法 : 让我们创建一个React项目并安装React MUI模块。然后我们将创建一个展示 React MUI CardActions API. 的UI。

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

项目结构 : 在执行上述步骤中提到的命令后，如果您在编辑器中打开项目，您将看到一个类似下面所示的项目结构。新的用户组件或代码更改将在源文件夹中进行。

React MUI CardActions API

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

npm start

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

import * as 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'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}> 
               GeeksforGeeks 
             </h1> 
            <h3><u>React MUI CardActions API</u></h3> 
            <br /> 
            <Card> 
                <CardContent variant="outlined"> 
                    <h1>DSA Self Paced Course</h1> 
                    <h3> 
                        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 ! 
                    </h3> 
                </CardContent> 
                <CardActions disableSpacing> 
                    <Button variant="contained"> 
                      Learn More 
                    </Button> 
                </CardActions> 
            </Card> 
        </div> 
    ); 
}

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

React MUI CardActions API

示例2 : 我们正在创建一个UI，展示React MUI CardActions API。

import * as 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'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI CardActions API</u></h3> 
            <Card variant="outlined"> 
                <CardContent> 
                    <h1>Alert !!</h1> 
                    <h3> 
                        Are you sure you want to download ? 
                    </h3> 
                </CardContent> 
                <CardActions sx={{ bgcolor: "#E8E8E8" }}> 
                    <Button variant="outlined" color="success"> 
                       Download 
                     </Button> 
                    <Button variant="outlined" color="error"> 
                       Cancel 
                    </Button> 
                </CardActions> 
            </Card> 
        </div> 
    ); 
}