I recently utilized ANTD and React to develop a customized component step style, but ran into an issue. Here is the CSS code snippet I used:
/* step connector */
.ant-steps-item-title:after {
border: solid rgba(65, 64, 66, 0.1) !important;
}
/* step */
.ant-steps-item-icon{
width: 3em;
height: 3em;
display: flex; // ==> when i add this
justify-content: center; // ==> when i add this
align-items: center; // ==> when i add this
}
.ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-icon {
background-color: #21D47E;
border-color: #21D47E;
}
/* size of step container */
.ant-steps{
width: 50%;
}
.ant-steps-horizontal .ant-steps-label-horizontal{
display: flex;
justify-content: center;
align-items: center;
}
After attempting to center the numbers using the following CSS:
.ant-steps-item-icon{
width: 3em;
height: 3em;
display: flex; *
justify-content: center; *
align-items: center; *
}
The steps connector vanished as shown here: https://i.sstatic.net/y0egD.png
This excerpt showcases how my react component calls Steps:
import { Steps } from 'antd'
import React from 'react'
import './index.css'
const { Step } = Steps
export const Tahap: React.FC = () => {
return (
<div style={{ padding: '50px' }}>
<Steps>
<Step />
<Step />
<Step />
<Step />
<Step />
<Step />
</Steps>
</div>
)
}
If anyone has insights on how to re-display the connector, I would greatly appreciate it. Thank you.