[英]How to change Steps Color in ( Ant-design )
我是 Ant 設計的新手。 目前我正在研究 ReactJs 項目,並且我在我的項目中使用了Steps
。 我想改變Steps
的顏色,但不知道怎么可能。 我將分享 ant-design ( Steps
) 代碼。 請幫幫我
謝謝
您可能會在此代碼框中看到Steps
示例
代碼
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'));
使用內聯樣式。
代碼
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"));
如果您更改所有步驟尾部顏色,則將以下樣式放入index.css
.ant-steps-item-finish
> .ant-steps-item-container
> .ant-steps-item-tail::after {
background-color: red !important;
}
如果只更改一步尾顏色,則更改背景顏色,然后像這樣將 className 放在Step
<Steps className="custome-step" current={1} progressDot>
<Step title="In Progress" description="Loan Application" />
<Step title="" description="Loan Vetting" />
<Step title="" description="Disbursement" />
</Steps>
索引文件
.custome-step .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
background-color: red !important;
}
在您的 Step 中添加一個 span 並為其設置樣式或添加 class 名稱,如下所示:
<Step title={<span className="font-bold">First content</span>} status="process"/>
如果您想設置指示圓形背景的樣式,請將其添加到您的 CSS 並確保添加,重要:就像這樣:
.ant-steps-item-process .ant-steps-item-icon {
background: #46b3cb !important;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.