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>neveropen</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; |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
