React MUI AccordionActions API

React MUI 是一个提供预定义稳健和可定制组件的UI库，用于简化React的网页开发。MUI的设计基于谷歌的Material Design。Material-UI是一个用户界面库，提供了预定义和可定制的React组件，用于更快速和简单的网页开发，这些Material-UI组件基于谷歌的Material Design。

在本文中，我们将讨论 React MUI AccordionActions API 。Accordion组件允许用户在单个容器中组织不同部分的内容。用户可以显示和隐藏不同的部分。

导入AccordionActions API：

import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';

属性列表：

children： 用于表示手风琴的内容。
classes： 用于覆盖或扩展应用于组件的样式。
disableSpacing： 需要一个布尔值来移除额外的边距。
sx： 用于向手风琴添加自定义CSS样式。
CSS规则：
root (MuiAccordionActions-root)： 应用于根元素的样式。
spacing (MuiAccordionActions-spacing)： 当disableSpacing为true时应用样式。

步骤：

让我们创建一个React项目并安装React MUI模块。然后我们将创建一个展示React MUI AccordionActions 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 AccordionActions API

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

npm start

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

文件名：App.js

import * as React from 'react'; 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 
import { 
    Accordion, AccordionSummary, AccordionDetails 
    , AccordionActions, Button, Typography 
} from '@mui/material'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI AccordionActions API</u></h3> 
            <Accordion> 
                <AccordionSummary expandIcon={<ExpandMoreIcon />}> 
                    <Typography>Accordion 1</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <h3>Disabled Spacing</h3> 
                </AccordionDetails> 
                <AccordionActions disableSpacing={true}> 
                    <Button color="success" variant="contained"> 
                       Button 1 
                    </Button> 
                    <Button color="success" variant="contained"> 
                       Button 2 
                     </Button> 
                    <Button color="success" variant="contained"> 
                       Button 3 
                     </Button> 
                    <Button color="success" variant="contained"> 
                       Button 4 
                    </Button> 
                </AccordionActions> 
            </Accordion> 
        </div> 
    ); 
}

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

React MUI AccordionActions API

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

文件名：App.js

import * as React from 'react'; 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 
import { 
    Accordion, AccordionSummary, AccordionDetails 
    , AccordionActions, Button, Typography 
} from '@mui/material'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI AccordionActions API</u></h3> 
            <Accordion> 
                <AccordionSummary expandIcon={<ExpandMoreIcon />}> 
                    <Typography>DSA Self Paced</Typography> 
                </AccordionSummary> 
                <AccordionDetails> 
                    <p>Course Description</p> 
                    <p> 
                        Most popular course on DSA trusted by 
                        over 75,000 students! Built with years 
                        of experience by industry experts. Start 
                        Today! 
                    </p> 
                </AccordionDetails> 
                <AccordionActions sx={{ bgcolor: "green" }}> 
                    <Button color="warning" variant="contained"> 
                      Enroll Now 
                    </Button> 
                </AccordionActions> 
            </Accordion> 
        </div> 
    ); 
}

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

React MUI AccordionActions API