如何将MUI过期卡片组件设置为禁用状态？

问题出在你的CurrentSales是自定义组件，你传入的disabled属性不会自动生效——自定义组件需要显式接收这个props，并把它传递给内部的MUI卡片组件，同时处理禁用状态的样式或交互逻辑。

步骤1：修改CurrentSales组件，接收并处理disabled属性 #

假设你的CurrentSales内部用了MUI的Card组件，需要这样修改：

// CurrentSales.jsx
import { Card, CardContent } from '@mui/material';

const CurrentSales = ({ item, disabled = false }) => {
  return (
    <Card 
      sx={{
        // 自定义禁用状态的视觉样式
        opacity: disabled ? 0.6 : 1,
        pointerEvents: disabled ? 'none' : 'auto',
        cursor: disabled ? 'not-allowed' : 'default',
        border: disabled ? '1px solid rgba(0,0,0,0.12)' : 'none'
      }}
    >
      <CardContent>
        {/* 你的卡片内容，比如{item.name}、{item.date}等 */}
        {item.title}
      </CardContent>
    </Card>
  );
};

export default CurrentSales;

如果你的组件内部包含可交互元素（比如按钮），还要把disabled传递给这些元素：

// 示例：给内部按钮添加禁用属性
<Button disabled={disabled}>操作</Button>

步骤2：保持映射代码不变 #

你原来的映射代码可以继续使用，disabled属性现在会被CurrentSales组件接收并处理：

{expired && 
  expired.map((item, i) => <CurrentSales disabled key={item.id ?? i} item={item} />)}

补充说明 #

• MUI的Card组件本身没有原生disabled属性，所以需要通过样式来实现视觉上的禁用效果；如果用的是CardActionArea这类支持disabled的组件，可以直接把属性传递过去。
• 要是需要更贴合MUI的禁用风格，可以参考MUI官方组件的禁用样式参数，确保视觉统一。

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