寻求MUI CardHeader替代方案：解决布局居中与无法使用useState问题

1. 修复CardHeader内容垂直居中问题 #

CardHeader默认布局未设置垂直居中，通过自定义sx样式覆盖默认布局即可实现内容对齐：

import { Card, CardHeader, Avatar, IconButton, Typography } from '@mui/material';
import { FavoriteBorderIcon, FavoriteIcon } from '@mui/icons-material';
import { useState } from 'react';
import red from '@mui/material/colors/red';

const CustomCard = () => {
  // 正常使用useState控制按钮状态
  const [isFavorited, setIsFavorited] = useState(false);

  return (
    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <CardHeader
        avatar={<Avatar sx={{ bgcolor: red[500] }} aria-label="logo">N</Avatar>}
        action={
          <IconButton 
            aria-label="enable"
            onClick={() => setIsFavorited(!isFavorited)}
          >
            {isFavorited ? <FavoriteIcon /> : <FavoriteBorderIcon />}
          </IconButton>
        }
        title={<Typography variant="h6">Netflix</Typography>}
        subheader={<Typography variant="body2">netflix.com</Typography>}
        // 关键样式：实现内部元素垂直居中
        sx={{
          display: 'flex',
          alignItems: 'center',
          '.MuiCardHeader-content': {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
          },
        }}
      />
    </Card>
  );
};

export default CustomCard;

2. 解决useState无法使用的问题 #

• 确保组件是函数组件（类组件不支持useState，需改用this.state）
• 正确导入useState：import { useState } from 'react';
• 示例中已包含useState用法，点击爱心图标可切换状态，验证其正常工作

效果说明 #

通过设置CardHeader的alignItems: 'center'和内容区域的justifyContent: 'center'，实现了头像、标题/子标题、操作按钮的垂直居中对齐，匹配目标效果；同时useState可正常控制交互状态。

内容的提问来源于stack exchange，提问作者user18184979