MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the Material UI Card Complex Interaction. The Card component allows the user to show content related to a single subject in a rectangular box.
Import Card API:
import Card from '@mui/material/Card';
// or
import {Card} from '@mui/material';
Approach: Let us create a React Project with the help of the MUI card component. As a result, we will see a UI using the Material UI card component.
Installing and Creating React app, and adding the MUI dependencies:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react @emotion/styled npm install @mui/lab
Step 4: Run the project as follows:
npm start
Project Structure: The project should look like below:
Project Structure
Example 1: In this example, We will design a UI that shows Card Component Complex Interaction.
App.js
Javascript
import * as React from 'react'; import { Button, Card, CardMedia, CardActions, CardContent } from '@mui/material'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import Collapse from '@mui/material/Collapse'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';   const ExpandMore = styled((props) => {     const { expand, ...other } = props;     return < IconButton {...other} />   })(({ theme, expand }) => ({     transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',     marginLeft: 'auto',     transition: theme.transitions.create('transform', {         duration: theme.transitions.duration.shortest,     }), }));       export default function Demo() {     const [expanded, setExpanded] = React.useState(false);       const handleExpandClick = () => {         setExpanded(!expanded)     };       return (         <div style={{ margin: 10 }}>             <h1 style={{ color: 'green' }}>                 neveropen</h1>             <Card raised={true} sx={{ maxWidth: 1500 }}>                 <CardMedia                     component="img"                    height="300"                    image=                     alt="GFG Logo"                />                 <CardContent sx={{ bgcolor: "#E8E8E8" }}>                     <h3>DSA Self Paced Course</h3>                     <h4 style={{ color: "green" }}>                         Most popular course on DSA trusted by                         over 75,000 students! Built with years                         of experience by industry experts and                         gives you a complete package of video                         lectures, practice problems, quizzes,                         discussion forums and contests.<br />                         Start Today !                     </h4>                 </CardContent>                 <CardActions >                     <Button variant="contained"                             color="warning">                         Share                     </Button>                     <Button variant="contained"                             color="success">                         Enroll                     </Button>                       <Button variant="contained"                             color="success">                         Expand more                         <ExpandMore                             expand={expanded}                             onClick={handleExpandClick}                             aria-expanded={expanded}                             aria-label="show more"                        >                             <ExpandMoreIcon />                         </ExpandMore>                     </Button>                 </CardActions>                 <Collapse in={expanded} timeout="auto"                           unmountOnExit>                     <CardContent>                         <Typography paragraph>                             This course does not require any prior knowledge                             of Data Structure and Algorithms and it covers                             all topics in two languages: C++ and Java.                             You will also learn algorithmic techniques for                             solving various problems, get to learn                             important topics for interviews and get fluent                             in the basics of programming. You will master all                             the important topics of data structures and                             algorithms like sorting, strings, heaps, DP,                             searching, trees and more and even learn this                            concepts by practicing on real-world projects.                             If you have any more queries you can write                             to us at courses@geeksforgeeks.org                         </Typography>                       </CardContent>                 </Collapse>             </Card>         </div>     ); } |
Output:
Â
Example 2: In this example, we will see one more UI on the card’s complex layout.
App.js
Javascript
import * as React from 'react'; import { Button, Card, CardActions, CardContent } from '@mui/material'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import Collapse from '@mui/material/Collapse'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';   const ExpandMore = styled((props) => {     const { expand, ...other } = props;     return < IconButton {...other} />   })(({ theme, expand }) => ({     transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',     marginLeft: 'auto',     transition: theme.transitions.create('transform', {         duration: theme.transitions.duration.shortest,     }), }));       export default function Demo() {     const [expanded, setExpanded] = React.useState(false);       const handleExpandClick = () => {         setExpanded(!expanded)     };       return (         <div style={{ margin: 100 }}>             <h1 style={{ color: 'green' }}>             neveropen</h1>             <h3><u>Welcome Geeks</u></h3>             <Card raised={true}                   sx={{ bgcolor: "#E8E8E8" }} >                 <CardContent>                     <h1>Welcome Page</h1>                     <h3>Learn Self Paced Course and                         get a high paying job!!</h3>                 </CardContent>                 <CardActions >                     <Button variant="outlined"                             color="error">                         Cancel                     </Button>                     <Button variant="contained"                             color="success">                         Want to Know more                         <ExpandMore                             expand={expanded}                             onClick={handleExpandClick}                             aria-expanded={expanded}                             aria-label="show more"                        >                             <ExpandMoreIcon />                         </ExpandMore>                     </Button>                 </CardActions>                 <Collapse in={expanded} timeout="auto"                           unmountOnExit>                     <CardContent>                         <Typography paragraph>                             This course does not require any prior knowledge                             of Data Structure and Algorithms and it covers                             all topics in two languages: C++ and Java.                             You will also learn algorithmic techniques for                             solving various problems, get to learn important                             topics for interviews and get fluent in the                             basics of programming. You will master all the                             important topics of data structures and algorithms                             like sorting, strings, heaps, DP, searching, trees                             and more and even learn this concepts by practicing                             on real-world projects. If you have any more                             queries you can write to us at                             courses@geeksforgeeks.org                         </Typography>                     </CardContent>                 </Collapse>             </Card>         </div>     ); } |
Output:
Â
Reference: https://mui.com/material-ui/react-card/#complex-interaction
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!
