如何自定义Antdesign步骤？

Question

有没有办法自定义antdesign步骤线？

我目前正在开发下一个 JS 项目，我们正在使用 CSS 模块。所以，我最近一直致力于定制这些 antdesign 步骤。我成功地使用全局实现了它，但我仍然无法自定义步骤行。我怎样才能做到这一点？ antdesign默认的线条是蓝色的，但是我想要绿色的，而且即使我使用global也不起作用。

Answer 1

您可以使用 ConfigProvider 组件轻松自定义 Ant Design 步骤行，该组件从 Ant Design 版本 5 开始提供。通过在 ConfigProvider 中定义主题令牌，您可以应用全局样式，例如更改步骤线的主要颜色。

这是一个为步骤行设置自定义颜色的示例代码片段：

import { ConfigProvider, Steps } from "antd";

const CustomSteps = () => {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: "#00FF00", // Customize the line color here
        },
      }}
    >
      <Steps
        size="small"
        current={currentStepIndex}
        progressDot
        status="finish"
        items={[
          {
            title: "In Process",
          },
          {
            title: "Evaluation",
          },
          {
            title: "Submission",
          },
        ]}
      />
    </ConfigProvider>
  );
};