React MUI Surface Components

Last Updated : 14 Mar, 2023

React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.

Surface Components refer to a type of component that provides a container for other UI elements.

MUI provides various types of Surface Components:

Components	Description
Accordion	This component is used to create an expandable and collapsible section, where only one section can be open at a time.
App bar	This component provides a way to create a top navigation bar in your application, with options for branding, navigation, and actions.
Card	This component provides a way to display content in a compact and attractive format, with media, actions, and text options.
Paper	This component provides a paper-like background that can be used to wrap content and provide depth and shadow.

Creating a React Application Project:

Step 1: To create a react app, install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

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

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

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI basic accordion surface component.

Filename: App.js

Javascript

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;