从Ant Design（https://ant.design/components/steps/）更改Steps React组件的行为

Question

就像在链接示例中一样，我想将Steps react组件的行为从ANT设计更改为仅进行着色，然后仅在单击的步骤上选择（高度）（因为现在它也对之前的所有步骤都进行了着色） ）

Answer 1

您必须使用status prop in Step。

Documentation

Example in CodeSandbox

内容：

  <Steps current="2">
     <Step title="INSTRUCTIONS" />
     <Step title="REGISTRATION" />
     <Step title="VERIFICATION" />
  </Steps>

使用status 等待执行之前的步骤：

  <Steps current="2">
     <Step status="wait" title="INSTRUCTIONS" />
     <Step title="REGISTRATION" />
     <Step title="VERIFICATION" />
  </Steps>

Answer 2

Step组件中的status有一个可用的道具。它会覆盖当前变量的突出显示。您可以使用它。 例如：

  <Steps current={this.state.current} progressDot={customDot}>
    <Step
      title="Finished"
      status={0 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="In Progress"
      status={1 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="Waiting"
      status={2 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
    <Step
      title="Start"
      status={3 < this.state.current ? "wait" : null}
      description="You can hover on the dot."
    />
  </Steps>,
);