如何在 Antd 的模态框中更改样式？

Question

在React项目中，我使用Ant Design（Antd）作为CSS框架。因此，我们有一个要求来更改Modal的样式，它是Antd的一个组件。希望更改Modal组件的边框半径，但是尝试了很多次，都没有成功。是否有适当的解决方案？

1. Modal组件

<Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        className="modalStyle"
        //bodyStyle={{ borderRadius: "20px" }} {/* Also tried with bodyStyle property */}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
</Modal>

index.css

.modalStyle {
  border-radius: 20px;
}

.newStyle {
  border-radius: 20px;
}

/* applied style to its root properties, but no change */
.ant-modal-content {
  border-radius: 20px;
}

以下是codesandbox链接：https://codesandbox.io/s/basic-antd4168-forked-rz764。

- Pranav

Answer 1

添加：

.modalStyle2 .ant-modal-header {
  border-radius: 20px 20px 0 0;
}

或者

.modalStyle .ant-modal-header {
  border-radius: 20px 20px 0 0;
}

- DVN-Anakin

Answer 2

模态框不会受到直接CSS的影响。您需要在全局CSS文件中编写内容，然后它才能工作。在全局CSS下方编写，它将起作用。

.modalStyle .ant-modal-content{
   background-color: #01579b;
}

- Abhishek Satyam

Answer 3

请查看codesandbox：https://codesandbox.io/s/basic-antd4168-forked-0nddw

Modal组件的className属性应用于根元素，但是为了样式化边框半径，您应该将其应用于嵌套的.ant-modal-content和.ant-modal-header元素：

- ishaba

Answer 4

您不需要自定义CSS，可以将HTML字符串作为标题。

    <Modal
      open={open}
      centered
      width={450}
      title={<p className="text-black/[.88] text-[30px] font-bold">Upload company logo</p>}
      onOk={() => setOpen(false)}
      onCancel={() => setOpen(false)}      
    >

- Ares