当前位置：首页 > React

react实现卡片效果

2026-01-26 17:15:27React

React 实现卡片效果的方法

使用内联样式实现基础卡片

在 React 组件中直接通过 style 属性定义卡片样式：

function Card() {
  return (
    <div style={{
      width: '300px',
      padding: '20px',
      borderRadius: '8px',
      boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
      backgroundColor: 'white'
    }}>
      <h3>卡片标题</h3>
      <p>卡片内容描述文字</p>
    </div>
  );
}

使用 CSS Modules 实现可复用卡片

创建单独的样式文件（如 Card.module.css）：

.card {
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  background: white;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

在组件中引入样式：

import styles from './Card.module.css';

function Card({ title, content }) {
  return (
    <div className={styles.card}>
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

使用流行 UI 库实现卡片

安装 Material-UI 等流行库快速实现：

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

使用 Material-UI 的 Card 组件：

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

function MuiCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardContent>
        <Typography gutterBottom variant="h5">
          卡片标题
        </Typography>
        <Typography variant="body2" color="text.secondary">
          卡片详细内容描述文字...
        </Typography>
      </CardContent>
    </Card>
  );
}

实现交互式卡片效果

添加点击事件和状态管理：

import { useState } from 'react';

function InteractiveCard() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div 
      style={{
        transform: isActive ? 'scale(1.05)' : 'scale(1)',
        transition: 'transform 0.3s'
      }}
      onClick={() => setIsActive(!isActive)}
    >
      {/* 卡片内容 */}
    </div>
  );
}

卡片布局最佳实践

使用 CSS Grid 实现卡片网格布局：

function CardGrid() {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
      gap: '20px',
      padding: '20px'
    }}>
      {[1, 2, 3, 4].map(item => (
        <Card key={item} />
      ))}
    </div>
  );
}

react实现卡片效果