如何在React+TypeScript中正确构建MUI Card组件？

问题代码 #

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import Rating from '@mui/material/Rating';
import Button from '@mui/material/Button';

type MyCardProps = {
  title: string;
  content: string;
  imageSrc: string;
  characteristic1: string;
  characteristic2: string;
  characteristic3: string;
  characteristic4: string;
};

export const MyCard: React.FC<MyCardProps> = ({
  title,
  content,
  imageSrc,
  characteristic1,
  characteristic2,
  characteristic3,
  characteristic4,
}) => {
  return (
    <Card style={{
      display: 'flex', flexDirection: 'row', alignItems: 'center', width: '312px', height: '265px',
    }}>
      <CardContent>
        <Typography variant="h5" component="div" textAlign="center">
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {content}
        </Typography>
        <ul>
          <li>{characteristic1}</li>
          <li>{characteristic2}</li>
          <li>{characteristic3}</li>
          <li>{characteristic4}</li>
        </ul>
      </CardContent>
      <img src={imageSrc} alt="Car" style={{ width: '150px', height: '84.28px', marginLeft: '16px' }} />
      <div style={{ marginLeft: '16px' }}>
        <Checkbox /> Checkbox 1
        <Checkbox /> Checkbox 2
        <Rating name="rating" defaultValue={0} precision={0.5} />
        <Button variant="contained" color="primary">
          See more
        </Button>
      </div>
    </Card>
  );
};

export default MyCard;

修复方案 #

原代码核心问题是横向布局下元素未合理分配空间，右侧控件未垂直排列。以下是调整后的代码：

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import Rating from '@mui/material/Rating';
import Button from '@mui/material/Button';
import { Box } from '@mui/material';

type MyCardProps = {
  title: string;
  content: string;
  imageSrc: string;
  characteristic1: string;
  characteristic2: string;
  characteristic3: string;
  characteristic4: string;
};

export const MyCard: React.FC<MyCardProps> = ({
  title,
  content,
  imageSrc,
  characteristic1,
  characteristic2,
  characteristic3,
  characteristic4,
}) => {
  return (
    <Card 
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        width: '800px',
        padding: 2,
        gap: 2,
        height: '265px',
      }}
    >
      {/* 文本内容区域，占比60% */}
      <CardContent sx={{ flex: 0.6, padding: 2 }}>
        <Typography variant="h5" component="div" gutterBottom>
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary" gutterBottom>
          {content}
        </Typography>
        <ul style={{ paddingLeft: 20, margin: 0 }}>
          <li>{characteristic1}</li>
          <li>{characteristic2}</li>
          <li>{characteristic3}</li>
          <li>{characteristic4}</li>
        </ul>
      </CardContent>

      {/* 图片区域 */}
      <Box sx={{ flex: 0.2 }}>
        <img 
          src={imageSrc} 
          alt="Car" 
          style={{ width: '100%', height: 'auto', objectFit: 'contain' }} 
        />
      </Box>

      {/* 交互控件区域，垂直排列 */}
      <Box 
        sx={{ 
          flex: 0.2, 
          display: 'flex', 
          flexDirection: 'column', 
          gap: 1.5,
          alignItems: 'flex-start' 
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Checkbox />
          <Typography variant="body2">Checkbox 1</Typography>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Checkbox />
          <Typography variant="body2">Checkbox 2</Typography>
        </Box>
        <Rating name="rating" defaultValue={0} precision={0.5} />
        <Button variant="contained" color="primary" fullWidth>
          See more
        </Button>
      </Box>
    </Card>
  );
};

export default MyCard;

关键修改说明 #

• 用MUI的sx属性替代内联style，符合MUI最佳实践，支持响应式配置
• 给Card设置gap属性，统一内部元素间距，避免重复编写margin
• 按比例分配文本、图片、控件区域的空间（flex: 0.6/0.2/0.2），确保布局均衡
• 右侧控件区域改用垂直flex布局，让复选框、评分、按钮依次排列
• 用Box包裹复选框和文本，保证复选框与文字对齐
• 图片设置objectFit: 'contain'，避免拉伸变形
• 按钮设置fullWidth，在控件区域内自适应宽度

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