如何自定义Ant Design Steps的线条？Next.js+CSS Modules场景

原因分析 #

Ant Design Steps的连接线通过伪元素（::after）结合特定类名实现，默认样式权重较高，或自定义样式加载顺序早于AntD样式导致被覆盖，以下是几种可行解决方式：

方法1：主题定制（推荐，无样式冲突） #

直接通过Ant Design的主题配置修改Steps相关颜色变量，无需额外写自定义样式：

在pages/_app.jsx（或_app.tsx）中配置ConfigProvider：

import { ConfigProvider } from 'antd';
import React from 'react';

const customTheme = {
  token: {
    colorSuccess: '#52c41a', // 已完成步骤的连接线&图标颜色
    colorPrimary: '#52c41a', // 进行中步骤的连接线&图标颜色
  },
};

export default function App({ Component, pageProps }) {
  return (
    <ConfigProvider theme={customTheme}>
      <Component {...pageProps} />
    </ConfigProvider>
  );
}

所有Steps组件的线条颜色会自动替换为设置的绿色，无需手动覆盖样式。

方法2：全局样式提升权重 #

若必须用自定义全局样式，需确保选择器权重足够高，或强制覆盖（!important仅应急使用）：

在全局样式文件（比如styles/globals.css）中添加：

/* 已完成步骤的连接线 */
.ant-steps-item-finish .ant-steps-item-container::after {
  border-color: #52c41a !important;
}

/* 进行中步骤的连接线 */
.ant-steps-item-process .ant-steps-item-container::after {
  border-color: #52c41a !important;
}

/* 可选：修改未完成步骤的连接线颜色 */
.ant-steps-item-wait .ant-steps-item-container::after {
  border-color: #d9d9d9;
}

注意：若全局样式文件加载早于AntD样式，需用!important强制覆盖；也可调整导入顺序让自定义样式后加载。

方法3：CSS Modules结合全局选择器 #

若想在组件局部修改样式、避免影响全局其他Steps，可用CSS Modules的:global()语法包裹AntD类名：

在组件的CSS Modules文件（比如CustomSteps.module.css）中：

.customSteps :global(.ant-steps-item-finish .ant-steps-item-container::after) {
  border-color: #52c41a;
}

.customSteps :global(.ant-steps-item-process .ant-steps-item-container::after) {
  border-color: #52c41a;
}

然后在组件中使用：

import styles from './CustomSteps.module.css';
import { Steps } from 'antd';

export default function CustomSteps() {
  return (
    <Steps className={styles.customSteps} current={1}>
      <Steps.Step title="第一步" />
      <Steps.Step title="第二步" />
      <Steps.Step title="第三步" />
    </Steps>
  );
}

这种方式通过父类customSteps限定样式作用范围，不会影响其他页面的Steps组件。

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