React MUI AccordionDetails API

React MUI 是一个提供预定义、强大且可自定义的 React 组件库，用于更轻松地进行 Web 开发。MUI 的设计基于 Google 的 Material Design。Material-UI 是一个用户界面库，提供预定义且可自定义的 React 组件，用于更快速和简单的 Web 开发，这些 Material-UI 组件基于 Google 的 Material Design。

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

导入 AccordionDetails API：

import AccordionDetails from '@mui/material/AccordionDetails';

属性列表：

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

CSS规则：

root (MuiCard-root)： 应用于根元素的样式。

方法： 让我们创建一个React项目并安装React MUI模块。然后我们将创建一个展示React MUI AccordionDetails 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
npm install @mui/icons-material

项目结构: 在执行上面步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似如下的项目结构。我们将在源文件夹中进行新的用户创建或代码更改所需的工作。

React MUI AccordionDetails API

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

npm start

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

App.js

import * as React from 'react'; 
import { Accordion, AccordionSummary, AccordionDetails, Typography }  
from '@mui/material'; 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI AccordionDetails API</u></h3> 
            <Accordion> 
                <AccordionSummary expandIcon={<ExpandMoreIcon />}> 
                    <Typography>User 1</Typography> 
                </AccordionSummary> 
                <AccordionDetails sx={{ bgcolor: "#E8E8E8",  
                     color: "green" }}> 
                    <h3>Welcome to Geeks For Geeks</h3> 
                </AccordionDetails> 
            </Accordion> 
        </div> 
    ); 
}

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

React MUI AccordionDetails API

示例2： 我们正在创建一个UI，展示MUI AccordionDetails API。

App.js

import * as React from 'react'; 
import Accordion from '@mui/material/Accordion'; 
import AccordionSummary from '@mui/material/AccordionSummary'; 
import AccordionDetails from '@mui/material/AccordionDetails'; 
import Typography from '@mui/material/Typography'; 
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; 
  
export default function Demo() { 
    return ( 
        <div style={{ margin: 100 }}> 
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1> 
            <h3><u>React MUI AccordionDetails API</u></h3> 
            <Accordion> 
                <AccordionSummary expandIcon={<ExpandMoreIcon />}> 
                    <Typography>DSA Self Paced</Typography> 
                </AccordionSummary> 
                <AccordionDetails sx={{ bgcolor: "#E8E8E8" }}> 
                    <h3>Course Description</h3> 
                    <p> 
                        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. Start  
                        Today! 
                    </p> 
                </AccordionDetails> 
            </Accordion> 
            <Accordion> 
                <AccordionSummary expandIcon={<ExpandMoreIcon />}> 
                    <Typography> 
                        Complete Interview Preparation  
                        - Self Paced 
                    </Typography> 
                </AccordionSummary> 
                <AccordionDetails sx={{ bgcolor: "#E8E8E8" }}> 
                    <h3>Course Description</h3> 
                    <p> 
                        An interview-centric course designed  
                        to prepare you for the role of SDE 
                        for both product and service based  
                        companies. A placement preparation  
                        pack built with years of expertise.  
                        Prepare C++, Java,DSA, CS Theory  
                        concepts and much more! 
                    </p> 
                </AccordionDetails> 
            </Accordion> 
        </div> 
    ); 
}

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

React MUI AccordionDetails API