React MUI is a UI library that provides fully loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
The CardHeader is a component API provided by React MUI which allows us to customize the header for the Card Component. The card is the top-level component and the Card Header is written inside the Card component.
Importing the CardHeader component, we can use the following statement:
import { CardHeader } from @mui/material;
Syntax:
<CardHeader
title = "some_title"
subheader = "some_subheader"
/>
Props:
- title: used to provide a certain title to the header. For example, title = “Sports”.
- subheader: used to provide a certain subheader to the header. For example, subheader = “Cricket”.
- avatar: used to provide a displayed avatar. It is the circular logo you see at the top right-hand of your google login.
- action: to display an action in the header. For example, you see a dropdown list when you click on the menu.
- classes: to change the CSS styles applied to the component.
- component: The component used as the parent node. You can use HTML in strings or an actual component.
- disableTypograhpy: to disable the text from being wrapped inside the Typography component. It is false by default.
- subheaderTypographyProps: the props used in the Typography of the subheader, will be passed on to the subheader component (disableTypograhpy should be false).
- sx: to change system CSS styles or add new CSS styles.
- titleTypograhpyProps: the props used in the Typography of the title, will be passed on to the title component (disableTypograhpy should be false).
CSS:
- root: MuiCardHeader-root. This class is used to apply a style to the parent element.
- avatar: MuiCardHeader-avatar. This class is used to apply a style to the avatar prop.
- action: MuiCardHeader-action. This class is used to apply a style to the action prop.
- content: MuiCardHeader-content. This class is used to apply a style to the content of the card.
- title: MuiCardHeader-title. This class is used to apply a style to the title prop.
- subheader: MuiCardHeader-subheader. This class is used to apply a style to the subheader prop.
Creating React Application:
Step 1: Create a folder called react-card-header. Open your command-prompt/shell, navigate to that folder and use the following command –
npx create-react-app .
Step 2: This will install all the necessary React JS starter files. Once the installation is complete, we need to install the Material UI. For the same, use the command –
npm install @mui/material @emotion/react @emotion/styled
This will install react material ui for us. Now, that we have all the necessary starter files, let us start.
Project Structure: Inside your src folder, create a components folder. Inside this components folder, create two files namely SportsCard.js and LinkedinPost.js. Finally, your folder structure will look like this –
Folder Structure
Example: Let us start with our first example. In this example, we will create a Sportscard with a top menu of cricket, football, and badminton. It is a static card. Inside your components folder, open SportsCard.js. In this example, we displaying a card with a sports menu.
SportsCard.js
Javascript
import React from 'react'import { Card, CardHeader, CardContent, Typography, Button } from '@mui/material' const SportsCard = () => { return ( <div className="mui-card"> <Card> <CardHeader title="Sports" subheader="Select a sport from the menu" action={ <> <Button>Cricket</Button> <Button>Football</Button> <Button>Badminton</Button> </> } /> <hr /> <CardContent> <Typography variant="body1"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.Nostrum odit sint adipisci ipsum. Rem assumenda corporis iste perferendis, aperiam cum libero magni tempore optio quas repellendus molestiae, est quibusdam at voluptatum sint. </Typography> </CardContent> </Card> </div> ) } export default SportsCard |
We have App.css inside the src folder, where, I have added some css to center the card and make it attractive. Below is the code for the same.
App.css
CSS
.mui-card { max-width: 40%; margin: auto; margin-top: 35px; } h1 { text-align: center; color: green; } h2 { text-align: center; } hr { width: 95%; margin: auto; color: rgb(116, 113, 113); } |
In App.js, we are simply rendering the SportsCard.js component.
App.js
Javascript
import './App.css'; import SportsCard from './components/SportsCard'; function App() { return ( <> <SportsCard /> </> ); } export default App; |
Open your command prompt and type in the command:
npm start
Output:
React MUI CardHeader API
Example 2: Let’s move to our second example. In this example, we will create a LinkedIn post with a working-like button. Inside your components folder, create a file called LinkedinPost.js. In this example, we are creating a LinkedIn post, with a working like button.
LinkedinPost.js
Javascript
import React, { useState } from 'react'import { Card, CardHeader, CardContent, Avatar, Typography, IconButton } from '@mui/material'import ThumbUpIcon from '@mui/icons-material/ThumbUp'; const LinkedinPost = () => { const [color, setColor] = useState("default"); const handleColor = () => { if (color === "default") { setColor("primary"); } else if (color === "primary") { setColor("default"); } } return ( <div className="mui-card"> <Card> <CardHeader avatar={ <Avatar>P</Avatar> } title="Pranav Bapat" subheader="Content Writer at GeeksForGeeks" action={ <IconButton onClick={handleColor}> <ThumbUpIcon color={color} /> </IconButton> } /> <CardContent> <Typography variant="body2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, reiciendis sapiente. Ratione nobis aliquid magni consequuntur mollitia iure nesciunt nam perspiciatis nulla molestias sint ipsam sed, nihil doloribus dolore facere architecto minima! </Typography> </CardContent> </Card> </div> ) } export default LinkedinPost |
We have App.css inside the src folder, where, I have added some CSS to center the card and make it attractive. Below is the code for the same.
App.css
CSS
.mui-card { max-width: 40%; margin: auto; margin-top: 35px; } h1 { text-align: center; color: green; } h2 { text-align: center; } hr { width: 95%; margin: auto; color: rgb(116, 113, 113); } |
In App.js, we are simply rendering the SportsCard.js component.
App.js
Javascript
import './App.css'; import LinkedinPost from './components/LinkedinPost'; function App() { return ( <> <LinkedinPost /> </> ); } export default App; |
Now open your command-prompt/shell once more and type in the following command:
npm start
You will see the following output in your browser:
React MUI CardHeader API
Reference: https://mui.com/material-ui/api/card-header/
