Ant Design v5 Steps组件自定义状态图标实现方案咨询

在Ant Design v5中实现Steps组件不同状态的自定义图标，可通过以下方案完成：

核心思路 #

Ant Design v5的Steps组件支持为每个步骤项单独配置icon属性，同时可通过status字段标记错误状态。只需根据步骤的当前状态（完成/进行中/错误）动态返回对应图标即可覆盖默认样式。

具体实现步骤 #

1. 导入所需图标 #

可以使用Ant Design自带的图标库，也可以引入自定义SVG图标：

import { CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons';

2. 动态绑定图标与状态 #

通过判断步骤索引和current的关系，为完成状态的步骤设置自定义图标；为需要标记错误的步骤添加status="error"并绑定错误图标。

3. 完整代码示例 #

import "./index.css";
import { Steps } from "antd";
import { useState } from 'react';
import { CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined } from '@ant-design/icons';

const description = "This is a description.";
const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const stepsItems = [
    {
      title: "Finished",
      description,
      // 当步骤已完成（索引小于current），替换默认勾选图标
      icon: current > 0 ? <CheckCircleOutlined style={{ color: '#52c41a' }} /> : undefined
    },
    {
      title: "In Progress",
      description,
      // 进行中步骤自定义加载图标
      icon: current === 1 ? <LoadingOutlined style={{ color: '#1890ff' }} /> : undefined
    },
    {
      title: "Error Step",
      description,
      // 标记错误状态并设置自定义错误图标
      status: "error",
      icon: <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
    },
    {
      title: "Waiting",
      description
    }
  ];

  return (
    <Steps
      current={current}
      onChange={(num) => setCurrent(num)}
      items={stepsItems}
    />
  );
};

export default App;

关键细节说明 #

• 完成状态自动切换：通过index < current的判断，可实现步骤切换完成时自动替换为自定义图标，无需手动逐个配置。
• 错误状态配置：必须为步骤项添加status="error"，组件才会应用错误样式，此时自定义图标会覆盖默认错误图标。
• 样式自定义：可通过style属性或自定义CSS类调整图标的颜色、大小等样式。

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