#css #reactjs #typescript #antd
Вопрос:
Я использовал ANTD и React, и я хочу настроить стиль шага компонента, и я получил это:
из следующего CSS-кода:
/* 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;
}
Когда я добавляю это к центрированию числа:
.ant-steps-item-icon{
width: 3em;
height: 3em;
display: flex; *
justify-content: center; *
align-items: center; *
}
соединитель шагов отсутствует вот так:
и это мои шаги вызова компонента react:
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>
)
}
может ли кто-нибудь сказать мне, как повторно отобразить разъем? Спасибо
Ответ №1:
Чтобы достичь желаемого результата, вам нужно использовать display
свойство со inline-flex
значением вместо flex
:
.ant-steps-item-icon {
width: 3em;
height: 3em;
display: inline-flex;
justify-content: center;
align-items: center;
}
Это делает дисплей контейнера flex встроенным.