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