Как мне изменить ширину границы заголовка модального antd

#css #antd

#css #антд

Вопрос:

Модальный: введите описание изображения здесь

Нужно изменить ширину границы на половину модального или любого пользовательского пикселя.

Класс antd-modal-header имеет .border-bottom, но изменение ширины приводит к изменению высоты или делает границу жирной, но не размера.

Код :

   <Modal title="Add Name">
    <p>Some contents...</p>
  </Modal>
 

Вы можете подключиться к нижеприведенному классу, чтобы получить доступ к границе.

 .ant-modal .ant-modal-content .ant-modal-header{
    border-bottom: 2px solid #e9e9e9;//changing in 2px to 1px is reducing the height
}
 

Ссылка на CodeSandbox :
https://codesandbox.io/s/antd-modal-border-stackoverflow-kwdmb?file=/index.css

Комментарии:

1. пожалуйста, поместите пример кода здесь, чтобы другие могли понять, что вы хотите сделать.

2. @KuldipKoradia добавил пример кода

3. пожалуйста, проверьте ответ ниже, я думаю, это будет хорошо работать для вас. @Сай Кришнадас

Ответ №1:

пожалуйста, примените эти свойства CSS для достижения того, что вы хотите сделать.

 .ant-modal-header {
    border-bottom: 2px solid transparent;
    position: relative;
}
.ant-modal-header:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #e9e9e9;
    width: 50%;
    height: 2px;
}
 

Я попробовал это в демо-версии на этом веб-сайте https://ant.design/components/modal /

вот снимок экрана для того, чего вы хотите достичь введите описание изображения здесь

Я также попробовал это с вашим кодом CodeSandbox: вот снимок экрана этого. введите описание изображения здесь