diff --git a/components/modal/__tests__/type.test.tsx b/components/modal/__tests__/type.test.tsx
index 661923efae..18fe7447dd 100644
--- a/components/modal/__tests__/type.test.tsx
+++ b/components/modal/__tests__/type.test.tsx
@@ -4,8 +4,28 @@ import Modal from '..';
 
 describe('Modal.typescript', () => {
   it('Modal.okType', () => {
-    const form = <Modal okType="danger" />;
+    const modal = <Modal okType="danger" />;
 
-    expect(form).toBeTruthy();
+    expect(modal).toBeTruthy();
+  });
+
+  it('Modal.styles', () => {
+    const style: React.CSSProperties = {
+      position: 'absolute',
+    };
+    const modal = (
+      <Modal
+        styles={{
+          header: style,
+          body: style,
+          footer: style,
+          mask: style,
+          wrapper: style,
+          content: style,
+        }}
+      />
+    );
+
+    expect(modal).toBeTruthy();
   });
 });
diff --git a/components/modal/demo/_semantic.tsx b/components/modal/demo/_semantic.tsx
index 2d033b9366..0547852766 100644
--- a/components/modal/demo/_semantic.tsx
+++ b/components/modal/demo/_semantic.tsx
@@ -32,16 +32,14 @@ const BlockModal = (props: ModalProps) => {
       <Modal
         getContainer={() => divRef.current!}
         {...props}
-        styles={
-          {
-            mask: {
-              position: 'absolute',
-            },
-            wrapper: {
-              position: 'absolute',
-            },
-          } as any
-        }
+        styles={{
+          mask: {
+            position: 'absolute',
+          },
+          wrapper: {
+            position: 'absolute',
+          },
+        }}
         style={{
           top: '50%',
           transform: 'translateY(-50%)',
diff --git a/components/modal/interface.ts b/components/modal/interface.ts
index 576e2e9acd..e3890dffdd 100644
--- a/components/modal/interface.ts
+++ b/components/modal/interface.ts
@@ -5,13 +5,12 @@ import type { ClosableType } from '../_util/hooks/useClosable';
 import type { ButtonProps, LegacyButtonType } from '../button/button';
 import type { DirectionType } from '../config-provider';
 
-export type ModalFooterRender = (
-  originNode: React.ReactNode,
-  extra: { OkBtn: FC; CancelBtn: FC },
-) => React.ReactNode;
-interface ModalCommonProps {
-  styles?: Omit<NonNullable<DialogProps['styles']>, 'wrapper'>;
+interface ModalCommonProps extends Omit<DialogProps, 'footer'> {
+  footer?:
+    | React.ReactNode
+    | ((originNode: React.ReactNode, extra: { OkBtn: FC; CancelBtn: FC }) => React.ReactNode);
 }
+
 export interface ModalProps extends ModalCommonProps {
   /** Whether the modal dialog is visible or not */
   open?: boolean;
@@ -32,8 +31,6 @@ export interface ModalProps extends ModalCommonProps {
   centered?: boolean;
   /** Width of the modal dialog */
   width?: string | number;
-  /** Footer content */
-  footer?: ModalFooterRender | React.ReactNode;
   /** Text of the OK button */
   okText?: React.ReactNode;
   /** Button `type` of the OK button */