当前位置：首页 > React

React卡片容器实现

2026-01-26 20:00:46React

React 卡片容器实现方法

使用 Material-UI 的 Card 组件 Material-UI 提供了现成的 Card 组件，可以快速实现卡片布局。安装 Material-UI 后直接引入 Card 相关组件：

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';

function MyCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        height="140"
        image="/static/images/cards/contemplative-reptile.jpg"
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles...
        </Typography>
      </CardContent>
    </Card>
  );
}

自定义 CSS 实现卡片 通过 styled-components 或 CSS 模块创建自定义卡片样式：

import styled from 'styled-components';

const CardContainer = styled.div`
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
`;

const CardImage = styled.img`
  width: 100%;
  height: 200px;
  object-fit: cover;
`;

const CardBody = styled.div`
  padding: 16px;
`;

function CustomCard() {
  return (
    <CardContainer>
      <CardImage src="image.jpg" alt="Card" />
      <CardBody>
        <h3>Card Title</h3>
        <p>Card description goes here...</p>
      </CardBody>
    </CardContainer>
  );
}

响应式卡片布局 结合 CSS Grid 或 Flexbox 实现响应式卡片列表：

const CardGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
`;

function CardList() {
  return (
    <CardGrid>
      {[1, 2, 3].map((item) => (
        <CustomCard key={item} />
      ))}
    </CardGrid>
  );
}

带交互效果的卡片 添加 hover 动画和点击事件处理：

const HoverCard = styled(CardContainer)`
  transition: transform 0.3s ease;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }
`;

function InteractiveCard() {
  const handleClick = () => {
    console.log('Card clicked');
  };

  return (
    <HoverCard onClick={handleClick}>
      {/* Card content */}
    </HoverCard>
  );
}

可复用卡片组件 创建可配置的卡片组件：

React卡片容器实现

function ReusableCard({ title, description, imageUrl }) {
  return (
    <CardContainer>
      {imageUrl && <CardImage src={imageUrl} alt={title} />}
      <CardBody>
        <h3>{title}</h3>
        <p>{description}</p>
      </CardBody>
    </CardContainer>
  );
}