如何让antd modal有圆角

Question

  <Modal
    title=""
    visible={isModalVisible}
    onOk={handleOk}
    onCancel={handleCancel}
    cancelButtonProps={{ style: { display: "none" } }}
  >
    <img src="./test.svg" alt="" style={{ marginLeft: "8.5rem" }} />
    <p>It has been added!</p>
  </Modal>

我试过给模态框添加样式，

style ={{borderRadius:"20px",overflow:"auto"}}

但是在顶角上做了圆角并切断了底部。

Answer 1

只是覆盖 css/sass/scss 文件中的 .ant-modal-content 样式

/*your selectors if needed*/
.ant-modal-content {
  border-radius: 20px;
  /* background: red; */
}

示例：https://codesandbox.io/s/antd-reproduction-template-forked-qqe5k?file=/index.css:27-127

如何让antd modal有圆角

How to make antd modal have rounded corners

antd

ant-design-pro