如何自定义Ant Design Steps组件connector连接线的颜色与宽度？

方案1：CSS样式覆盖（兼容所有Ant Design版本） #

Steps的连接线本质是.ant-steps-item下的.ant-steps-item-tail节点，直接覆盖该类样式即可：

普通项目（无CSS Modules） #

/* 水平步骤条-未激活连接线 */
.ant-steps .ant-steps-item-tail {
  background-color: #e5e7eb; /* 自定义颜色 */
  height: 2px; /* 自定义宽度 */
  top: 16px; /* 可调整垂直位置对齐步骤图标 */
}

/* 水平步骤条-已激活连接线 */
.ant-steps .ant-steps-item-finish .ant-steps-item-tail {
  background-color: #1677ff; /* 自定义激活色 */
}

/* 垂直步骤条专用 */
.ant-steps-vertical .ant-steps-item-tail {
  width: 2px; /* 自定义宽度 */
  left: 16px; /* 可调整水平位置对齐步骤图标 */
}

CSS Modules/样式隔离环境 #

给样式加上:global包裹即可：

:global(.ant-steps .ant-steps-item-tail) {
  background-color: #e5e7eb;
  height: 2px;
}

如果只想修改单个Steps的样式，给组件添加自定义类名即可避免全局污染：

<Steps className="custom-steps" items={stepItems} />

对应样式：

.custom-steps .ant-steps-item-tail {
  background-color: #e5e7eb;
  height: 3px;
}
.custom-steps .ant-steps-item-finish .ant-steps-item-tail {
  background-color: #52c41a;
}

方案2：5.x版本主题配置（推荐） #

Ant Design 5.x支持通过ConfigProvider的theme配置全局修改Steps样式，无需自定义CSS：

import { ConfigProvider, Steps } from 'antd';

export default function App() {
  return (
    <ConfigProvider
      theme={{
        components: {
          Steps: {
            colorTextDisabled: '#e5e7eb', // 未激活连接线颜色
            colorPrimary: '#1677ff', // 已激活连接线颜色
            tailHeight: 2, // 连接线宽度
          }
        }
      }}
    >
      {/* 全局所有Steps都会生效 */}
      <Steps items={stepItems} />
    </ConfigProvider>
  )
}

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