React MUI Accordion API

MUI is a popular open-source library of React components for building web applications. It provides a set of pre-designed UI components, such as buttons, forms, icons, typography, and more, that can be easily customized and integrated into any React application.

Accordion is a type of UI component that allows users to collapse and expand content sections based on their needs. It is a popular UI pattern that is used in many web applications to provide a more streamlined user experience. MUI Accordion API provides a wide range of options for building such accordion components with ease.

To use the Accordion component, you need to provide it with some content that will be collapsed and expanded as per the user’s interaction. The Accordion component has different types of props that allow you to modify the behavior, look, and feel of the accordion. You can use an expanded prop to determine whether the Accordion is expanded or collapsed. 

Props:

• children – The content of the Accordion component, typically used to render AccordionDetails and AccordionSummary components.
• classes – Override or extend the styles applied to the component using the MUI withStyles higher-order component.
• defaultExpanded – If true, the Accordion will be expanded by default when the page loads.
• disabled – If true, the Accordion will be disabled and cannot be expanded or collapsed.
• disableGutters – If true, the Accordion will not have gutters (padding) on its sides.
• expanded – If true, the Accordion will be expanded and show its content.
• onChange – Callback function that is called when the Accordion changes its state (expanded or collapsed).
• square – If true, the Accordion will be square instead of rounded at the corners.
• sx – Custom styles for the Accordion component using the sx prop from the MUI theme, enabling the use of the MUI theme and custom styles together.
• TransitionComponent – The component used for the transition when the Accordion expands or collapses, typically an MUI Collapse or Grow component.
• TransitionProps –  Additional props to pass to the TransitionComponent, such as timeout or appear.

CSS:

• root – The root element of the Accordion component, used to apply styles to the component as a whole.
• rounded – A Boolean value that determines if the Accordion should have rounded corners or not.
• expanded – A class applied to the Accordion when it is expanded, used to apply styles to the Accordion’s content when it is expanded.
• disabled – A class applied to the Accordion when it is disabled, used to apply styles to the Accordion when it cannot be interacted with.
• gutters – A class applied to the Accordion’s content wrapper, used to apply padding to the Accordion’s content.
• region – A CSS selector for the region of the Accordion, used to apply styles to a specific region of the Accordion, such as the header or content region.

Inheritance: The Accordion component inherits the props of the ‘Paper’ component, which means we can use all ‘Paper’ props in the accordion component. It can be used to target nested components.

Syntax:

Import Accordion API:

import { Accordion } from '@mui/material';

Creating React Project:

Step 1: Create a react app. Use the command below.

npx create-react-app project_name

Step 2: Go to your project directory to perform different operations.

cd project_name

Step 3: Installing MUI modules.

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/icons-material

Project Structure:

Project Structure

Example 1: Basic MUI Accordion implementation.

Output:

 

Example 2: MUI Accordion implementation with icons in it.

Output:

 

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