Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'));
like image 314
John Dae Avatar asked Nov 23 '18 12:11

John Dae


People also ask

How do you change the color of Ant Design?

You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file. Here is a CodeSandBox demo with a changed index. css .

Is antd heavy?

antd is 348kB uncompressed. The entire app including antd, React and stupidly large lodash plus lots of other stuff is 350kB gzipped.

Is it possible to change the primary color in ant design?

I'm unfamiliar with Ant Design, but you can see in their docs ( Customize Theme) that you're able to edit the primary color like so: Thanks for contributing an answer to Stack Overflow!

How many colors are there in ant design's color palette?

Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design. Ant Design's color palette also has the ability to further extend.

How to install antd in React Native?

Step 1: set up your app using the command create-react-app <APP NAME> install antd using the command npm install antd install less globally using the command npm install less -g Step 2: Move into the dist directory of antd package in the node module

How to install antd theme with npm?

install antd using the command npm install antd install less globally using the command npm install less -g Step 2: Move into the dist directory of antd package in the node module Step 3: In the dist directory create a file called my-theme.less or you could call it any name of your choice.


3 Answers

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"));
like image 70
Selmi Karim Avatar answered Oct 19 '22 14:10

Selmi Karim


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

like image 42
Eugene Dzhevadov Avatar answered Oct 19 '22 15:10

Eugene Dzhevadov


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

like image 1
Amit Kadivar Avatar answered Oct 19 '22 16:10

Amit Kadivar