Qfyilyi

I am new to Ant-design. Currently I am working on ReactJs project and I've used Steps in my project. I want to change the color of Steps but did not get idea how will it be possible . I will share ant-design (Steps) code. Please help me out

Thanks

You may see example of Steps in this codesandbox

Code

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'));

Use inline styles.

Code

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} style={{ "background-color": "blueviolet" }}>

          {steps.map(item => (

            <Step key={item.title} title={item.title} />

          ))}

        </Steps>

        <div className="steps-content" style={{ "background-color": "grey" }}>

          {steps[current].content}

        </div>

        <div className="steps-action" style={{ "background-color": "blue" }}>

          {current < steps.length - 1 && (

            <Button

              type="primary"

              style={{ "background-color": "red" }}

              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"));

Try to add following CSS

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

See index.css in this example

By the way you a have a more robust way to change ant framework styling, please refer to the documenatation