能否在鼠标悬停MUI Card组件时切换其variant属性？

方案一：通过状态切换variant属性 #

利用React状态管理，监听鼠标进入/离开事件动态变更Card的variant值：

import { useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';

function HoverCard() {
  const [cardVariant, setCardVariant] = useState('outline');

  const handleMouseEnter = () => {
    setCardVariant('elevation');
  };

  const handleMouseLeave = () => {
    setCardVariant('outline');
  };

  return (
    <Card
      variant={cardVariant}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      sx={{ transition: 'all 0.3s ease' }} // 添加入场过渡让切换更平滑
    >
      <CardContent>Card 1</CardContent>
    </Card>
  );
}

export default HoverCard;

方案二：用CSS自定义hover样式（无需切换variant） #

如果不想依赖状态管理，直接通过CSS模拟elevation的阴影效果，同时隐藏outline边框：

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

function HoverCard() {
  return (
    <Card
      variant="outline"
      sx={{
        transition: 'all 0.3s ease',
        '&:hover': {
          border: 'none',
          boxShadow: '0 4px 8px rgba(0,0,0,0.1)', // 模拟elevation阴影，可按需调整参数
        },
      }}
    >
      <CardContent>Card 1</CardContent>
    </Card>
  );
}

export default HoverCard;

说明：第二种方案更轻量，直接通过CSS伪类实现视觉效果；第一种方案则是真正切换组件的variant属性，会完全应用elevation对应的内置样式，可根据需求选择。

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