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'));
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 .
antd is 348kB uncompressed. The entire app including antd, React and stupidly large lodash plus lots of other stuff is 350kB gzipped.
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!
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.
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
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With