如何在（Ant-design）中更改步骤颜色

Question

我是蚂蚁设计的新手。目前我正在研究 ReactJs 项目，并且在我的项目中使用了 Steps 。我想更改 Steps 的颜色，但不知道怎么可能。我将分享 ant-design ( Steps ) 代码。请帮帮我

谢谢

您可能会在 此代码 和框中看到 Steps 的示例

代码

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Steps, Button, message } from 'antd';

const Step = Steps.Step;

const steps = [{
  title: 'First',
  content: 'First-content',
}, {
  title: 'Second',
  content: 'Second-content',
}, {
  title: 'Last',
  content: 'Last-content',
}];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }

  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }

  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action">
          {
            current < steps.length - 1
            && <Button type="primary" onClick={() => this.next()}>Next</Button>
          }
          {
            current === steps.length - 1
            && <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
          }
          {
            current > 0
            && (
            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
              Previous
            </Button>
            )
          }
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

原文由 John Dae 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试添加以下 CSS

 .ant-steps-item-process .ant-steps-item-icon { background: red; }

请参阅本 示例 中的 index.css

顺便说一下，您有更强大的方法来更改 ant 框架样式，请参阅 文档

原文由 Eugene Dzhevadov 发布，翻译遵循 CC BY-SA 4.0 许可协议