React MUI 扩展面板表面

React MUI 是一个提供完整组件的UI库，将我们自己的设计系统带入到我们的生产就绪组件中。MUI是一个用户界面库，提供了预定义和可定制的React组件，用于更快速、更容易的Web开发，这些Material-UI组件是基于Google的Material Design的。

在这篇文章中，我们将讨论 React MUI 扩展面板表面 。扩展面板组件是一个轻量级容器，在页面上显示和隐藏相关内容的部分。

MUI 扩展面板表面的变体： 卡片表面有一个默认版本。下面给出了另一个变体。

基本扩展面板： 它是React MUI中的默认扩展面板。
可控制的扩展面板： 它扩展了默认行为，以使用组件创建一个扩展面板。
自定义： 扩展面板表面也可以进行自定义。
性能： 为了优化使用多个扩展面板的情况，请确保通过启用TransitionProps属性中的unmountOnExit来更改默认行为。
可访问性： 在AccordionSummary上使用id和aria-controls来获得最佳的可访问性。

语法：

<Accordion>
    ...
</Accordion>

创建一个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 扩展面板表面

运行应用程序的步骤：

npm start

示例1： 以下示例演示了React MUI基本手风琴表面组件。

import 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 ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center",  
                          color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Card Surface</h2> 
            </div> 
            <center> 
                <div style={{ width: 500 }}> 
                    <Accordion style={{ backgroundColor: '#8AFF89' }}> 
                        <AccordionSummary 
                            expandIcon={<ArrowDropDownIcon />}> 
                            <Typography>Courses</Typography> 
                        </AccordionSummary> 
                        <AccordionDetails> 
                            <Typography> 
                                <li>C++</li> 
                                <li>Java</li> 
                                <li>Python</li> 
                            </Typography> 
                        </AccordionDetails> 
                    </Accordion> 
                    <Accordion style={{ backgroundColor: '#8AFF89' }}> 
                        <AccordionSummary 
                            expandIcon={<ArrowDropDownIcon />}> 
                            <Typography>Tutorials</Typography> 
                        </AccordionSummary> 
                        <AccordionDetails> 
                            <Typography> 
                                <li>DSA</li> 
                                <li>Algorithms</li> 
                                <li>Web Development</li> 
                            </Typography> 
                        </AccordionDetails> 
                    </Accordion> 
                    <Accordion style={{ backgroundColor: '#8AFF89' }}> 
                        <AccordionSummary 
                            expandIcon={<ArrowDropDownIcon />}> 
                            <Typography>Practice</Typography> 
                        </AccordionSummary> 
                        <AccordionDetails> 
                            <Typography> 
                                <li>Problem of the Day</li> 
                                <li>All DSA Problems</li> 
                            </Typography> 
                        </AccordionDetails> 
                    </Accordion> 
                </div> 
            </center> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI 扩展面板表面

示例2： 下面的示例演示了React MUI控制的手风琴表面组件。

import React, { useState } 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 ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; 
  
function App() { 
    const [open, setOpen] = useState(false); 
  
    const accChange = (card) => (e, isOpen) => { 
        setOpen(isOpen ? card : false); 
    }; 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center",  
                          color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Card Surface</h2> 
            </div> 
            <div style={{ width: 500, marginLeft: 100 }}> 
                <Accordion 
                    expanded={open === "accordionFirst"} 
                    onChange={accChange("accordionFirst")} 
                > 
                    <AccordionSummary expandIcon={<ArrowDropDownIcon />}> 
                        <Typography sx={{ width: "50%" }}> 
                            Courses 
                        </Typography> 
                        <Typography> 
                             Premium Programming courses.. 
                        </Typography> 
                    </AccordionSummary> 
                    <AccordionDetails> 
                        <Typography> 
                            Buy courses to advance your skills in coding. 
                        </Typography> 
                    </AccordionDetails> 
                </Accordion> 
                <Accordion 
                    expanded={open === "accordionSecond"} 
                    onChange={accChange("accordionSecond")} 
                > 
                    <AccordionSummary expandIcon={<ArrowDropDownIcon />}> 
                        <Typography sx={{ width: "50%" }}> 
                            Tutorials 
                         </Typography> 
                        <Typography> 
                            Millions of articles on platform. 
                         </Typography> 
                    </AccordionSummary> 
                    <AccordionDetails> 
                        <Typography> 
                            Find millions of technical articles  
                            related to coding, 
                            programming, etc. 
                        </Typography> 
                    </AccordionDetails> 
                </Accordion> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI 扩展面板表面