React MUI CardHeader API

React MUI是一个提供丰富组件的UI库，将我们自己的设计系统引入到生产可用的组件中。MUI是一个用户界面库，提供了预定义和可自定义的React组件，用于更快、更简便的web开发，这些Material-UI组件是基于Google的Material Design设计的。

CardHeader是React MUI提供的一个组件API，允许我们自定义Card组件的标题。Card是顶级组件，Card Header写在Card组件中。

导入CardHeader组件，我们可以使用以下语句：

import { CardHeader } from @mui/material;

语法:

<CardHeader 
      title = "some_title"
      subheader = "some_subheader"
/>

属性(props):

title（标题）: 用于给标题(header)提供一个特定的标题。例如，title = “运动”。
subheader（子标题）: 用于给标题(header)提供一个特定的子标题。例如，subheader = “板球”。
avatar（头像）: 用于提供一个显示的头像。它是你在google登录页面右上方看到的圆形的徽标。
action（动作）: 用于在标题(header)中显示一个动作。例如，当你点击菜单时，你会看到一个下拉列表。
classes（类）: 用于更改应用于组件的CSS样式。
component（组件）: 用作父节点的组件。你可以在字符串中使用HTML或者一个实际的组件。
disableTypography（禁用文本格式）: 用于禁止文本被包装在Typography组件中。默认为false。
subheaderTypographyProps（子标题文本格式属性）: 用于子标题的Typography的属性，将被传递给子标题组件（disableTypography应为false）。
sx: 用于更改系统CSS样式或添加新的CSS样式。
titleTypographyProps（标题文本格式属性）: 用于标题的Typography的属性，将被传递给标题组件（disableTypography应为false）。

CSS样式:

root： MuiCardHeader-root。这个类用于给父元素应用样式。
avatar（头像）: MuiCardHeader-avatar。这个类用于给头像(prop)应用样式。
action（动作）: MuiCardHeader-action。这个类用于给动作(prop)应用样式。
content（内容）: MuiCardHeader-content。这个类用于给卡片的内容应用样式。
title（标题）: MuiCardHeader-title。这个类用于给标题(prop)应用样式。
subheader（子标题）: MuiCardHeader-subheader。这个类用于给子标题(prop)应用样式。

创建React应用:

步骤1: 创建一个名为react-card-header的文件夹。打开命令提示符/Shell，导航到该文件夹并使用以下命令 –

npx create-react-app .

步骤2： 这将安装所有必要的React JS起始文件。安装完成后，我们需要安装Material UI。为此，请使用以下命令-

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

这将为我们安装React Material UI。现在，我们已经拥有所有必要的入门文件，让我们开始吧。

项目结构： 在您的src文件夹内，创建一个components文件夹。在这个components文件夹内，创建两个文件，分别是SportsCard.js和LinkedinPost.js。最终，您的文件夹结构将如下所示-

React MUI CardHeader API

示例： 让我们从第一个示例开始。在这个示例中，我们将创建一个带有板球、足球和羽毛球顶部菜单的运动卡片。这是一个静态卡片。在你的组件文件夹中，打开SportsCard.js。在这个示例中，我们显示了一个带有体育菜单的卡片。

SportsCard.js

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

我们在src文件夹中有App.css，其中，我添加了一些CSS来居中卡片并使其更具吸引力。以下是相应的代码。

App.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); 
}

在App.js中，我们只是渲染了SportsCard.js组件。

App.js

import './App.css'; 
import SportsCard from './components/SportsCard'; 
  
function App() { 
    return ( 
        <> 
            <SportsCard /> 
        </> 
    ); 
} 
  
export default App;

打开命令提示符并输入以下命令：

npm start

输出：

React MUI CardHeader API

示例2：

让我们来看看第二个示例。在这个示例中，我们将创建一个带有可工作的“喜欢”按钮的LinkedIn帖子。在你的components文件夹内，创建一个名为 LinkedinPost.js 的文件。在这个示例中，我们正在创建一个带有可工作的“喜欢”按钮的LinkedIn帖子。

LinkedinPost.js

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

我们的src文件夹中有一个App.css文件，我在其中添加了一些CSS代码来使卡片居中并使其更具吸引力。以下是相应的代码。

App.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); 
}

在 App.js 中，我们只是渲染 SportsCard.js 组件。

App.js

import './App.css'; 
import LinkedinPost from './components/LinkedinPost'; 
  
function App() { 
    return ( 
        <> 
            <LinkedinPost /> 
        </> 
    ); 
} 
  
export default App;

现在再次打开您的命令提示符/Shell，并键入以下命令：