antd modal如何修改header border的宽度

Question

模态：

需要将边框宽度更改为模态宽度的一半或任何自定义像素。

antd-modal-header class有一个.border-bottom但是改变宽度就是改变高度或使边框看起来很粗但不是大小。

代码：

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

您可以点击下方 class 进入边界。

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

代码沙盒link： https://codesandbox.io/s/antd-modal-border-Whosebug-kwdmb?file=/index.css

Answer 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 代码：这是它的屏幕截图。

antd modal如何修改header border的宽度

How do I change the width of the header border of antd modal

css

antd