从 antd design 中删除页脚后的样式问题

Question

我通过 footer={null} 删除了 antd 模态页脚，但是空的 space 留在了里面。

代码：

<Modal
  style={{ backgroundColor: "#FFFFFF", borderRadius: "20px" }}
  width={480}
  footer={null}
>
    <p>
      Done!
    </p>
    <p>
      You've added a name
    </p>
    <Button
      style={{
        borderRadius: "7px",
      }}
    >
      OK
    </Button>
</Modal>

模态截图：

我需要将模态半径设为 20px，但在添加 borderRadius 后，页脚样式保持不变。

Codesandbox link : https://codesandbox.io/s/modal-issue-8x2vm?file=/index.js

Answer 1

覆盖填充，然后隐藏溢出，使边框半径可见。

<Modal
  visible={isModalVisible}
  style={{
    backgroundColor: "#FFFFFF",
    borderRadius: "20px",
    overflow: "hidden",
    padding: 0
  }}
  width={480}
  footer={null}
>
  <p>Done</p>
  <p>Added name!</p>
  <Button onClick={handleCancel}>OK</Button>
</Modal>

从 antd design 中删除页脚后的样式问题

styling issue after removing footer from antd design

css

reactjs

antd