设置AntD Steps的.ant-steps-item-icon为flex后步骤连接线消失如何解决

Ant Design的Steps步骤条连接线默认有两种渲染逻辑，一是通过.ant-steps-item-icon的::after伪元素生成，二是通过独立的.ant-steps-item-tailDOM节点渲染。你给.ant-steps-item-icon添加display: flex属性后，伪元素会被识别为flex容器的子项，原本的绝对定位布局逻辑被破坏，就会出现连接线消失的问题。

• 方案1：调整居中实现逻辑，不修改.ant-steps-item-icon的display属性
  单行序号居中不需要依赖flex布局，用行高+文本对齐即可实现，不会破坏原有连接线逻辑：

  .ant-steps-item-icon {
    width: 3em;
    height: 3em;
    line-height: 3em; /* 与高度一致实现单行文字垂直居中 */
    text-align: center; /* 水平居中 */
    /* 移除原有的display: flex、justify-content: center、align-items: center属性 */
  }
  /* 如果图标内有复杂元素（比如自定义图标、多行内容），给内部图标容器加flex */
  .ant-steps-item-icon .ant-steps-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  

• 方案2：保留flex布局，单独修复连接线伪元素定位
  如果必须保留.ant-steps-item-icon的flex属性，给伪元素单独加绝对定位，使其脱离flex布局逻辑：

  .ant-steps-item-icon {
    position: relative; /* 新增作为伪元素的定位父级 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
  }
  /* 恢复连接线伪元素的默认布局 */
  .ant-steps-item-icon::after {
    position: absolute !important;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    /* 宽度可根据你的步骤间距调整，默认和步骤项的剩余宽度一致即可 */
    width: calc(100% - 3em);
    background-color: #e8e8e8;
  }
  /* 隐藏最后一个步骤的多余连接线 */
  .ant-steps-item:last-child .ant-steps-item-icon::after {
    display: none;
  }
  

• 方案3：校验.ant-steps-item-tail节点样式
  部分版本的AntD Steps连接线由独立的.ant-steps-item-tail节点渲染，如果你的自定义CSS意外覆盖了该节点的样式，也会导致连接线消失，可添加以下样式适配你修改后的大图标：

  .ant-steps-item-tail {
    /* 调整top和left值为图标宽高的一半，使连接线和图标中心对齐 */
    top: 1.5em !important;
    left: 1.5em !important;
  }
  

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