CODEWITHSUNDEEP
javascriptreactjsreact-nativeant-design-pro
John Dae
John Dae

Reputation: 81

How to change Steps Color in ( Ant-design )

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

Upvotes: 8

Views: 21165

Answers (5)

Asma Idbensalah
Asma Idbensalah

Reputation: 1

The code is producing the expected results.

<Steps current={current} className="horizontal-steps" >
      {steps.map((item) => (
        <Step key={item.title} title={item.title} />
       ))}
 </Steps>
.horizontal-steps .ant-steps-item-finish .ant-steps-item-icon .anticon-check  {
 
 color: white !important; /* Replace with your desired color */

}
/* Change the color of the steps circles */
.horizontal-steps .ant-steps-item-process .ant-steps-item-icon, 
.horizontal-steps .ant-steps-item-finish .ant-steps-item-icon, 
.horizontal-steps .ant-steps-item-error .ant-steps-item-icon {
  background-color: #ae2593 !important; /* Replace with your desired color */
  border-color: #ae2593 !important; /* Replace with your desired color */
}


.horizontal-steps .ant-steps-item-finish .ant-steps-item-title::after{
  background-color: #ae2593 !important; /* Replace with your desired color */
 color: #ae2593 !important; /* Replace with your desired color */

}

Upvotes: 0

Issa
Issa

Reputation: 112

Add a span in your Step and style it or add a class name, just like this:

<Step title={<span className="font-bold">First content</span>} status="process"/>

If you want to style an indicating circle background, add it to your CSS and make sure you add !important, just like this:

.ant-steps-item-process .ant-steps-item-icon {
    background: #46b3cb !important;
}

Upvotes: 0

Amit Kadivar
Amit Kadivar

Reputation: 818

if you change all your step tails color then put the following style in index.css

.ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-tail::after {
  background-color: red !important;
}

change background-color if you change only one step tail color then put className in Step like this 

       <Steps className="custome-step" current={1} progressDot>
              <Step title="In Progress" description="Loan Application" />
              <Step title="" description="Loan Vetting" />
              <Step title="" description="Disbursement" />
       </Steps>

index.css

.custome-step .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
  background-color: red !important;
}

example

Upvotes: 1

Eugene Dzhevadov
Eugene Dzhevadov

Reputation: 116

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

Upvotes: 2

Selmi Karim
Selmi Karim

Reputation: 2235

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

Upvotes: 2

Related Questions