React MUI AccordionSummary API

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top Material Design by Google. In this article let’s discuss the AccordionSummary API in the Material-UI library.

AccordionSummary API offered by MUI: AccordionSummary API is used when giving a brief summary of an Accordion (Expansion Panel) component. 

Importing the API:

import AccordionSummary from '@mui/material/AccordionSummary';
// or
import { AccordionSummary } from '@mui/material';

AccordionSummary props:

• children: It denotes the <option> elements that represent the items in the select list.
• classes: It denotes the styles to override the default ones.
• expandIcon: It denotes the icon to display as the expand indicator
• focusVisibleClassName: It helps identify which DOM element has the keyboard focus. 
• sx: It denotes a system prop that allows defining system overrides and additional CSS styles.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material

Project Structure:  It will look like the following.

Example 1: In this example, we will try to create a simple application that uses AccordionSummary component to give a brief summary/title to an Accordian. Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

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 SimpleAccordion() {
    return (
        <div>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                >
                    <Typography>Accordion 1</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit.
                        Suspendisse
                        malesuada lacus ex, sit amet blandit leo lobortis
                        eget.
                    </Typography>
                </AccordionDetails>
            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                >
                    <Typography>Accordion 2</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Suspendisse
                        malesuada lacus ex, sit amet blandit leo lobortis
                        eget.
                    </Typography>
                </AccordionDetails>
            </Accordion>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Example 2: In this example, let’s change the above code to include a border color of red to the AccordianSummary when the component is focused using keyboard interactions. Change your App.js like the one below.

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 ArrowForwardIosSharpIcon from '@mui/icons-material/ExpandMore';
import './App.css'

export default function SimpleAccordion() {
    return (
        <div>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ArrowForwardIosSharpIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                    focusVisibleClassName='focus'
                >
                    <Typography>Accordion 1</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Suspendisse
                        malesuada lacus ex, sit amet blandit leo lobortis
                        eget.
                    </Typography>
                </AccordionDetails>
            </Accordion>
            <Accordion>
                <AccordionSummary
                    expandIcon={<ArrowForwardIosSharpIcon />}
                    aria-controls="panel2a-content"
                    id="panel2a-header"
                    focusVisibleClassName='focus'
                >
                    <Typography>Accordion 2</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <Typography>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Suspendisse
                        malesuada lacus ex, sit amet blandit leo lobortis eget.
                    </Typography>
                </AccordionDetails>
            </Accordion>
        </div>
    );
}

App.css

.focus {
    border: 2px solid red !important;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Reference: https://mui.com/material-ui/api/accordion-summary/