如何为MUI的Card组件设置空数据状态下的默认展示内容

核心逻辑和DataGrid的NoRowsOverlay一致：通过条件判断数据是否为空，空状态下渲染自定义占位内容，有数据时正常渲染目标组件，不需要引入额外依赖。

单场景快速实现 #

直接在CardContent内加入空值判断，按状态渲染对应内容即可，参考代码如下：

<Card {...props}>
  <CardHeader title="test" style={{ textAlign: 'center' }} />
  <Divider />
  <CardContent>
    {/* 请替换为和你业务data结构匹配的空值判定条件 */}
    {!data || data.datasets?.every(dataset => dataset.data?.length === 0) ? (
      <div style={{
        minHeight: 240,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#6b7280'
      }}>
        暂无数据
      </div>
    ) : (
      <Doughnut data={data} options={options} />
    )}
  </CardContent>
</Card>

注意空值判定规则需要和你使用的Doughnut组件接收的data结构匹配，避免出现误判：如果你的空数据是null、undefined、数据集数组为空、数据集内数值全为0这类不同场景，对应调整判断条件即可。空状态容器建议设置和正常图表一致的最小高度，避免状态切换时页面布局跳动。

多场景通用封装 #

如果项目内多个Card都需要空状态效果，可以抽离通用空状态组件，封装成可复用的业务卡片组件，减少重复代码：

// 通用Card空状态占位组件
const CardEmptyOverlay = ({ desc = '暂无数据' }) => {
  return (
    <div style={{
      minHeight: 240,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      gap: 8,
      color: '#6b7280'
    }}>
      {/* 可在这里插入自定义空状态图标，和全站风格统一 */}
      <span>{desc}</span>
    </div>
  )
}

// 封装带空状态判断的图表卡片
const DoughnutCard = ({ title, data, options, emptyDesc, ...cardProps }) => {
  const isEmpty = !data || data.datasets?.every(dataset => !dataset.data || dataset.data.length === 0)
  return (
    <Card {...cardProps}>
      <CardHeader title={title} style={{ textAlign: 'center' }} />
      <Divider />
      <CardContent>
        {isEmpty ? <CardEmptyOverlay desc={emptyDesc} /> : <Doughnut data={data} options={options} />}
      </CardContent>
    </Card>
  )
}

// 业务页面直接调用即可
<DoughnutCard 
  title="test" 
  data={data} 
  options={options} 
  emptyDesc="当前暂无统计数据"
  {...props} 
/>

如果需要和项目内DataGrid的NoRowsOverlay效果完全统一，直接复用对应空状态的样式、图标配置即可，保持全站视觉一致性。

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