Соединитель между шагами исчезает, когда я устанавливаю display .ant-шаги-значок элемента с гибким

#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 встроенным.