diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts
index 355e980e57..b9e4585187 100644
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@@ -17,6 +17,7 @@ import type { ComponentToken as MenuComponentToken } from '../../menu/style';
 import type { ComponentToken as UploadComponentToken } from '../../upload/style';
 import type { ComponentToken as CarouselComponentToken } from '../../carousel/style';
 import type { ComponentToken as SpaceComponentToken } from '../../space/style';
+import type { ComponentToken as ModalComponentToken } from '../../modal/style';
 
 export const PresetColors = [
   'blue',
@@ -91,6 +92,7 @@ export interface OverrideToken {
   Card?: {};
   Steps?: {};
   Menu?: MenuComponentToken;
+  Modal?: ModalComponentToken;
   Layout?: {};
   Upload?: UploadComponentToken;
   Tooltip?: {};
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index ecd09f383e..d7a688c0c6 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -10,6 +10,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { ConfigContext, DirectionType } from '../config-provider';
 import { canUseDocElement } from '../_util/styleChecker';
 import { getTransitionName } from '../_util/motion';
+import useStyle from './style';
 
 let mousePosition: { x: number; y: number } | null;
 
@@ -181,6 +182,8 @@ const Modal: React.FC<ModalProps> = props => {
 
   const prefixCls = getPrefixCls('modal', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
+  // Style
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const defaultFooter = (
     <LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
@@ -198,13 +201,14 @@ const Modal: React.FC<ModalProps> = props => {
     [`${prefixCls}-centered`]: !!centered,
     [`${prefixCls}-wrap-rtl`]: direction === 'rtl',
   });
-  return (
+  return wrapSSR(
     <Dialog
       {...restProps}
       getContainer={
         getContainer === undefined ? (getContextPopupContainer as getContainerFunc) : getContainer
       }
       prefixCls={prefixCls}
+      rootClassName={hashId}
       wrapClassName={wrapClassNameExtended}
       footer={footer === undefined ? defaultFooter : footer}
       visible={visible}
@@ -214,7 +218,7 @@ const Modal: React.FC<ModalProps> = props => {
       focusTriggerAfterClose={focusTriggerAfterClose}
       transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
       maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-    />
+    />,
   );
 };
 
diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less
index dfe34d1d20..3e84b25b7f 100644
--- a/components/modal/style/confirm.less
+++ b/components/modal/style/confirm.less
@@ -1,74 +1,74 @@
-@import '../../style/mixins/index';
+// @import '../../style/mixins/index';
 
-@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
+// @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
 
-.@{confirm-prefix-cls} {
-  .@{ant-prefix}-modal-header {
-    display: none;
-  }
+// .@{confirm-prefix-cls} {
+//   .@{ant-prefix}-modal-header {
+//     display: none;
+//   }
 
-  .@{ant-prefix}-modal-body {
-    padding: @modal-confirm-body-padding;
-  }
+//   .@{ant-prefix}-modal-body {
+//     padding: @modal-confirm-body-padding;
+//   }
 
-  &-body-wrapper {
-    .clearfix();
-  }
+//   &-body-wrapper {
+//     .clearfix();
+//   }
 
-  &-body {
-    .@{confirm-prefix-cls}-title {
-      display: block;
-      // create BFC to avoid
-      // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
-      overflow: hidden;
-      color: @heading-color;
-      font-weight: 500;
-      font-size: @modal-confirm-title-font-size;
-      line-height: 1.4;
-    }
+//   &-body {
+//     .@{confirm-prefix-cls}-title {
+//       display: block;
+//       // create BFC to avoid
+//       // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
+//       overflow: hidden;
+//       color: @heading-color;
+//       font-weight: 500;
+//       font-size: @modal-confirm-title-font-size;
+//       line-height: 1.4;
+//     }
 
-    .@{confirm-prefix-cls}-content {
-      margin-top: 8px;
-      color: @text-color;
-      font-size: @font-size-base;
-    }
+//     .@{confirm-prefix-cls}-content {
+//       margin-top: 8px;
+//       color: @text-color;
+//       font-size: @font-size-base;
+//     }
 
-    > .@{iconfont-css-prefix} {
-      float: left;
-      margin-right: 16px;
-      font-size: 22px;
+//     > .@{iconfont-css-prefix} {
+//       float: left;
+//       margin-right: 16px;
+//       font-size: 22px;
 
-      // `content` after `icon` should set marginLeft
-      + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
-        margin-left: 38px;
-      }
-    }
-  }
+//       // `content` after `icon` should set marginLeft
+//       + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
+//         margin-left: 38px;
+//       }
+//     }
+//   }
 
-  .@{confirm-prefix-cls}-btns {
-    float: right;
-    margin-top: 24px;
+//   .@{confirm-prefix-cls}-btns {
+//     float: right;
+//     margin-top: 24px;
 
-    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
-      margin-bottom: 0;
-      margin-left: 8px;
-    }
-  }
+//     .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+//       margin-bottom: 0;
+//       margin-left: 8px;
+//     }
+//   }
 
-  &-error &-body > .@{iconfont-css-prefix} {
-    color: @error-color;
-  }
+//   &-error &-body > .@{iconfont-css-prefix} {
+//     color: @error-color;
+//   }
 
-  &-warning &-body > .@{iconfont-css-prefix},
-  &-confirm &-body > .@{iconfont-css-prefix} {
-    color: @warning-color;
-  }
+//   &-warning &-body > .@{iconfont-css-prefix},
+//   &-confirm &-body > .@{iconfont-css-prefix} {
+//     color: @warning-color;
+//   }
 
-  &-info &-body > .@{iconfont-css-prefix} {
-    color: @info-color;
-  }
+//   &-info &-body > .@{iconfont-css-prefix} {
+//     color: @info-color;
+//   }
 
-  &-success &-body > .@{iconfont-css-prefix} {
-    color: @success-color;
-  }
-}
+//   &-success &-body > .@{iconfont-css-prefix} {
+//     color: @success-color;
+//   }
+// }
diff --git a/components/modal/style/index.less b/components/modal/style/index.less
index 5acc2608d4..2a16182d3b 100644
--- a/components/modal/style/index.less
+++ b/components/modal/style/index.less
@@ -1,7 +1,7 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import './modal';
-@import './confirm';
-@import './rtl';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
+// @import './modal';
+// @import './confirm';
+// @import './rtl';
 
-.popover-customize-bg(@dialog-prefix-cls, @popover-background);
+// .popover-customize-bg(@dialog-prefix-cls, @popover-background);
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 416ec0177e..d987ee5fbf 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -1,5 +1,382 @@
-import '../../style/index.less';
-import './index.less';
+// deps-lint-skip-all
+import React from 'react';
+import { CSSObject } from '@ant-design/cssinjs';
+import { TinyColor } from '@ctrl/tinycolor';
+import {
+  genComponentStyleHook,
+  GenerateStyle,
+  mergeToken,
+  resetComponent,
+  clearFix,
+} from '../../_util/theme';
+import type { FullToken } from '../../_util/theme';
 
-// style dependencies
-import '../../button/style';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+}
+
+interface ModalToken extends FullToken<'Modal'> {
+  // Custom token here
+  modalHeaderPaddingVertical: number;
+  modalHeaderPaddingHorizontal: number;
+  modalBodyPadding: number;
+  modalHeaderBg: string;
+  modalHeaderPadding: string;
+  modalHeaderBorderWidth: number;
+  modalHeaderBorderStyle: string;
+  modalHeaderTitleLineHeight: string;
+  modalHeaderTitleFontSize: number;
+  modalHeaderBorderColorSplit: string;
+  modalHeaderCloseSize: number;
+  modalContentBg: string;
+  modalHeadingColor: string;
+  modalCloseColor: string;
+  modalFooterBg: string;
+  modalFooterBorderColorSplit: string;
+  modalFooterBorderStyle: string;
+  modalFooterPaddingVertical: number;
+  modalFooterPaddingHorizontal: number;
+  modalFooterBorderWidth: number;
+  modalMaskBg: string;
+  modalConfirmBodyPadding: string;
+  modalConfirmTitleFontSize: number;
+  modalIconHoverColor: string;
+}
+
+function box(position: React.CSSProperties['position']): React.CSSProperties {
+  return {
+    position,
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0,
+  };
+}
+
+function modalMask(componentCls: string, token: ModalToken): CSSObject {
+  return {
+    [`${componentCls}${token.antCls}-zoom-enter, ${componentCls}${token.antCls}-zoom-appear`]: {
+      // reset scale avoid mousePosition bug
+      transform: 'none',
+      opacity: 0,
+      animationDuration: token.motionDurationSlow,
+      // https://github.com/ant-design/ant-design/issues/11777
+      userSelect: 'none',
+    },
+
+    [`${componentCls}-mask`]: {
+      ...box('fixed'),
+      zIndex: token.zIndexPopup,
+      height: '100%',
+      backgroundColor: token.modalMaskBg,
+
+      [`${componentCls}-hidden`]: {
+        display: 'none',
+      },
+    },
+
+    [`${componentCls}-wrap`]: {
+      ...box('fixed'),
+      overflow: 'auto',
+      outline: 0,
+      WebkitOverflowScrolling: 'touch',
+    },
+  };
+}
+
+const genModalStyle: GenerateStyle<ModalToken> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-root`]: {
+      ...modalMask(componentCls, token),
+
+      [componentCls]: {
+        ...resetComponent(token),
+        pointerEvents: 'none',
+        position: 'relative',
+        top: 100,
+        width: 'auto',
+        maxWidth: 'calc(100vw - 32px)',
+        margin: '0 auto',
+        paddingBottom: token.paddingLG,
+
+        '&-title': {
+          margin: 0,
+          color: token.modalHeadingColor,
+          fontWeight: 500,
+          fontSize: token.fontSizeLG,
+          lineHeight: token.modalHeaderTitleLineHeight,
+          wordWrap: 'break-word',
+        },
+
+        '&-content': {
+          position: 'relative',
+          backgroundColor: token.modalContentBg,
+          backgroundClip: 'padding-box',
+          border: 0,
+          borderRadius: token.controlRadius,
+          boxShadow: token.boxShadow,
+          pointerEvents: 'auto',
+        },
+
+        '&-close': {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          // FIXME: hard code
+          zIndex: token.zIndexBase + 10,
+          padding: 0,
+          color: token.modalCloseColor,
+          // FIXME: hard code
+          fontWeight: 700,
+          lineHeight: 1,
+          textDecoration: 'none',
+          background: 'transparent',
+          border: 0,
+          outline: 0,
+          cursor: 'pointer',
+          transition: `color ${token.motionDurationSlow}`,
+
+          '&-x': {
+            display: 'block',
+            width: token.modalHeaderCloseSize,
+            height: token.modalHeaderCloseSize,
+            fontSize: token.fontSizeLG,
+            fontStyle: 'normal',
+            lineHeight: `${token.modalHeaderCloseSize}px`,
+            textAlign: 'center',
+            textTransform: 'none',
+            textRendering: 'auto',
+          },
+
+          '&:focus, &:hover': {
+            color: token.modalIconHoverColor,
+            textDecoration: 'none',
+          },
+        },
+
+        '&-header': {
+          padding: token.modalHeaderPadding,
+          color: token.colorText,
+          background: token.modalHeaderBg,
+          borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
+          borderRadius: `${token.controlRadius}px ${token.controlRadius}px 0 0`,
+        },
+
+        '&-body': {
+          padding: token.modalBodyPadding,
+          fontSize: token.fontSizeBase,
+          lineHeight: token.lineHeight,
+          wordWrap: 'break-word',
+        },
+
+        '&-footer': {
+          padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
+          textAlign: 'end',
+          background: token.modalFooterBg,
+          borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
+          borderRadius: `0 0 ${token.controlRadius}px ${token.controlRadius}px`,
+
+          [`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
+            marginBottom: 0,
+            marginInlineStart: token.marginXS,
+          },
+        },
+
+        '&-open': {
+          overflow: 'hidden',
+        },
+      },
+
+      [`${componentCls}-wrap`]: {
+        zIndex: token.zIndexPopup,
+        position: 'fixed',
+        inset: 0,
+        overflow: 'auto',
+        outline: 0,
+        WebkitOverflowScrolling: 'touch',
+      },
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl',
+      },
+
+      [`${componentCls}-centered`]: {
+        textAlign: 'center',
+
+        '&::before': {
+          display: 'inline-block',
+          width: 0,
+          height: '100%',
+          verticalAlign: 'middle',
+          content: '""',
+        },
+        [componentCls]: {
+          top: 0,
+          display: 'inline-block',
+          paddingBottom: 0,
+          textAlign: 'start',
+          verticalAlign: 'middle',
+        },
+      },
+
+      [`@media (max-width: ${token.screenSMMax})`]: {
+        [componentCls]: {
+          maxWidth: 'calc(100vw - 16px)',
+          margin: `${token.marginXS} auto`,
+        },
+        [`${componentCls}-centered`]: {
+          [componentCls]: {
+            flex: 1,
+          },
+        },
+      },
+    },
+  };
+};
+
+const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
+  const { componentCls } = token;
+  const confirmComponentCls = `${componentCls}-confirm`;
+
+  return {
+    [`${componentCls}-root`]: {
+      [confirmComponentCls]: {
+        '&-rtl': {
+          direction: 'rtl',
+        },
+        [`${token.antCls}-modal-header`]: {
+          display: 'none',
+        },
+        [`${token.antCls}-modal-body`]: {
+          // FIXME: hard code
+          padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
+        },
+        [`${confirmComponentCls}-body-wrapper`]: {
+          ...clearFix(),
+        },
+        [`${confirmComponentCls}-body`]: {
+          [`${confirmComponentCls}-title`]: {
+            display: 'block',
+            // create BFC to avoid
+            // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
+            overflow: 'hidden',
+            color: token.colorTextHeading,
+            // FIXME: hard code
+            fontWeight: 500,
+            fontSize: token.modalConfirmTitleFontSize,
+            // FIXME: hard code
+            lineHeight: 1.4,
+          },
+
+          [`${confirmComponentCls}-content`]: {
+            marginTop: token.marginXS,
+            color: token.colorText,
+            fontSize: token.fontSizeBase,
+          },
+
+          [`> ${token.iconCls}`]: {
+            float: 'left',
+            marginInlineEnd: token.margin,
+            // FIXME: hard code
+            fontSize: 22,
+
+            // `content` after `icon` should set marginLeft
+            [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
+              // FIXME: hard code
+              marginInlineStart: 38,
+            },
+          },
+        },
+        [`${confirmComponentCls}-btns`]: {
+          // FIXME: 改成 flex 布局
+          float: 'right',
+          marginTop: token.marginLG,
+
+          [`${token.antCls}-btn + ${token.antCls}-btn`]: {
+            marginBottom: 0,
+            marginInlineStart: token.marginXS,
+          },
+        },
+      },
+
+      [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
+        color: token.colorError,
+      },
+
+      [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
+        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
+        color: token.colorWarning,
+      },
+
+      [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
+        color: token.colorInfo,
+      },
+
+      [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
+        color: token.colorSuccess,
+      },
+    },
+  };
+};
+
+const genRTLStyle: GenerateStyle<ModalToken> = token => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}-root`]: {
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl',
+
+        [`${componentCls}-confirm-body`]: {
+          // FIXME: duplicated style
+          // direction: 'rtl',
+
+          [`>${token.iconCls}`]: {
+            float: 'right',
+          },
+        },
+
+        [`${componentCls}-confirm-btns`]: {
+          float: 'left',
+        },
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Modal', token => {
+  const modalToken = mergeToken<ModalToken>(token, {
+    modalHeaderPaddingVertical: token.paddingXS,
+    modalHeaderPaddingHorizontal: token.paddingLG,
+    modalBodyPadding: token.paddingLG,
+    modalHeaderBg: token.colorBgComponent,
+    modalHeaderPadding: `${token.padding}px ${token.paddingLG}px`,
+    modalHeaderBorderWidth: token.controlLineWidth,
+    modalHeaderBorderStyle: token.controlLineType,
+    //
+    modalHeaderTitleLineHeight: '22px',
+    modalHeaderTitleFontSize: token.fontSizeLG,
+    modalHeaderBorderColorSplit: token.colorSplit,
+    // FIXME: hard code
+    modalHeaderCloseSize: 56,
+    modalContentBg: token.colorBgComponent,
+    modalHeadingColor: token.colorTextHeading,
+    modalCloseColor: token.colorTextSecondary,
+    modalFooterBg: 'transparent',
+    modalFooterBorderColorSplit: token.colorSplit,
+    modalFooterBorderStyle: token.controlLineType,
+    // FIXME: hard code
+    modalFooterPaddingVertical: token.paddingXS + 2,
+    // FIXME: hard code
+    modalFooterPaddingHorizontal: token.padding,
+    modalFooterBorderWidth: token.controlLineWidth,
+    modalMaskBg: token.colorTextSecondary,
+    modalConfirmBodyPadding: `${token.padding * 2}px ${token.padding}px ${token.paddingLG}px`,
+    modalConfirmTitleFontSize: token.fontSizeLG,
+    // FIXME: hard code
+    modalIconHoverColor: new TinyColor('#000').setAlpha(0.75).toRgbString(),
+  });
+  return [genModalStyle(modalToken), genModalConfirmStyle(modalToken), genRTLStyle(modalToken)];
+});
diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
index 6fb60849ca..1afb518725 100644
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@@ -1,136 +1,136 @@
-@dialog-prefix-cls: ~'@{ant-prefix}-modal';
-
-.@{dialog-prefix-cls} {
-  .reset-component();
-  .modal-mask();
-
-  position: relative;
-  top: 100px;
-  width: auto;
-  max-width: calc(100vw - 32px);
-  margin: 0 auto;
-  padding-bottom: 24px;
-
-  &-wrap {
-    z-index: @zindex-modal;
-  }
-
-  &-title {
-    margin: 0;
-    color: @modal-heading-color;
-    font-weight: 500;
-    font-size: @modal-header-title-font-size;
-    line-height: @modal-header-title-line-height;
-    word-wrap: break-word;
-  }
-
-  &-content {
-    position: relative;
-    background-color: @modal-content-bg;
-    background-clip: padding-box;
-    border: 0;
-    border-radius: @border-radius-base;
-    box-shadow: @shadow-2;
-    pointer-events: auto;
-  }
-
-  &-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: @zindex-popup-close;
-    padding: 0;
-    color: @modal-close-color;
-    font-weight: 700;
-    line-height: 1;
-    text-decoration: none;
-    background: transparent;
-    border: 0;
-    outline: 0;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &-x {
-      display: block;
-      width: @modal-header-close-size;
-      height: @modal-header-close-size;
-      font-size: @font-size-lg;
-      font-style: normal;
-      line-height: @modal-header-close-size;
-      text-align: center;
-      text-transform: none;
-      text-rendering: auto;
-    }
-
-    &:focus,
-    &:hover {
-      color: @icon-color-hover;
-      text-decoration: none;
-    }
-  }
-
-  &-header {
-    padding: @modal-header-padding;
-    color: @text-color;
-    background: @modal-header-bg;
-    border-bottom: @modal-header-border-width @modal-header-border-style
-      @modal-header-border-color-split;
-    border-radius: @border-radius-base @border-radius-base 0 0;
-  }
-
-  &-body {
-    padding: @modal-body-padding;
-    font-size: @font-size-base;
-    line-height: @line-height-base;
-    word-wrap: break-word;
-  }
-
-  &-footer {
-    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
-    text-align: right;
-    background: @modal-footer-bg;
-    border-top: @modal-footer-border-width @modal-footer-border-style
-      @modal-footer-border-color-split;
-    border-radius: 0 0 @border-radius-base @border-radius-base;
-
-    .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
-      margin-bottom: 0;
-      margin-left: 8px;
-    }
-  }
-
-  &-open {
-    overflow: hidden;
-  }
-}
-
-.@{dialog-prefix-cls}-centered {
-  text-align: center;
-
-  &::before {
-    display: inline-block;
-    width: 0;
-    height: 100%;
-    vertical-align: middle;
-    content: '';
-  }
-  .@{dialog-prefix-cls} {
-    top: 0;
-    display: inline-block;
-    padding-bottom: 0;
-    text-align: left;
-    vertical-align: middle;
-  }
-}
-
-@media (max-width: @screen-sm-max) {
-  .@{dialog-prefix-cls} {
-    max-width: calc(100vw - 16px);
-    margin: 8px auto;
-  }
-  .@{dialog-prefix-cls}-centered {
-    .@{dialog-prefix-cls} {
-      flex: 1;
-    }
-  }
-}
+// @dialog-prefix-cls: ~'@{ant-prefix}-modal';
+
+// .@{dialog-prefix-cls} {
+//   .reset-component();
+//   .modal-mask();
+
+//   position: relative;
+//   top: 100px;
+//   width: auto;
+//   max-width: calc(100vw - 32px);
+//   margin: 0 auto;
+//   padding-bottom: 24px;
+
+//   &-wrap {
+//     z-index: @zindex-modal;
+//   }
+
+//   &-title {
+//     margin: 0;
+//     color: @modal-heading-color;
+//     font-weight: 500;
+//     font-size: @modal-header-title-font-size;
+//     line-height: @modal-header-title-line-height;
+//     word-wrap: break-word;
+//   }
+
+//   &-content {
+//     position: relative;
+//     background-color: @modal-content-bg;
+//     background-clip: padding-box;
+//     border: 0;
+//     border-radius: @border-radius-base;
+//     box-shadow: @shadow-2;
+//     pointer-events: auto;
+//   }
+
+//   &-close {
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     z-index: @zindex-popup-close;
+//     padding: 0;
+//     color: @modal-close-color;
+//     font-weight: 700;
+//     line-height: 1;
+//     text-decoration: none;
+//     background: transparent;
+//     border: 0;
+//     outline: 0;
+//     cursor: pointer;
+//     transition: color 0.3s;
+
+//     &-x {
+//       display: block;
+//       width: @modal-header-close-size;
+//       height: @modal-header-close-size;
+//       font-size: @font-size-lg;
+//       font-style: normal;
+//       line-height: @modal-header-close-size;
+//       text-align: center;
+//       text-transform: none;
+//       text-rendering: auto;
+//     }
+
+//     &:focus,
+//     &:hover {
+//       color: @icon-color-hover;
+//       text-decoration: none;
+//     }
+//   }
+
+//   &-header {
+//     padding: @modal-header-padding;
+//     color: @text-color;
+//     background: @modal-header-bg;
+//     border-bottom: @modal-header-border-width @modal-header-border-style
+//       @modal-header-border-color-split;
+//     border-radius: @border-radius-base @border-radius-base 0 0;
+//   }
+
+//   &-body {
+//     padding: @modal-body-padding;
+//     font-size: @font-size-base;
+//     line-height: @line-height-base;
+//     word-wrap: break-word;
+//   }
+
+//   &-footer {
+//     padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
+//     text-align: right;
+//     background: @modal-footer-bg;
+//     border-top: @modal-footer-border-width @modal-footer-border-style
+//       @modal-footer-border-color-split;
+//     border-radius: 0 0 @border-radius-base @border-radius-base;
+
+//     .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
+//       margin-bottom: 0;
+//       margin-left: 8px;
+//     }
+//   }
+
+//   &-open {
+//     overflow: hidden;
+//   }
+// }
+
+// .@{dialog-prefix-cls}-centered {
+//   text-align: center;
+
+//   &::before {
+//     display: inline-block;
+//     width: 0;
+//     height: 100%;
+//     vertical-align: middle;
+//     content: '';
+//   }
+//   .@{dialog-prefix-cls} {
+//     top: 0;
+//     display: inline-block;
+//     padding-bottom: 0;
+//     text-align: left;
+//     vertical-align: middle;
+//   }
+// }
+
+// @media (max-width: @screen-sm-max) {
+//   .@{dialog-prefix-cls} {
+//     max-width: calc(100vw - 16px);
+//     margin: 8px auto;
+//   }
+//   .@{dialog-prefix-cls}-centered {
+//     .@{dialog-prefix-cls} {
+//       flex: 1;
+//     }
+//   }
+// }
diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less
index 8a19025b6b..ed071e88c1 100644
--- a/components/modal/style/rtl.less
+++ b/components/modal/style/rtl.less
@@ -1,74 +1,74 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
 
-@dialog-prefix-cls: ~'@{ant-prefix}-modal';
-@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
-@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
+// @dialog-prefix-cls: ~'@{ant-prefix}-modal';
+// @confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
+// @dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
 
-.@{dialog-prefix-cls} {
-  &-wrap {
-    &-rtl {
-      direction: rtl;
-    }
-  }
+// .@{dialog-prefix-cls} {
+//   &-wrap {
+//     &-rtl {
+//       direction: rtl;
+//     }
+//   }
 
-  &-close {
-    .@{dialog-wrap-rtl-cls} & {
-      right: initial;
-      left: 0;
-    }
-  }
+//   &-close {
+//     .@{dialog-wrap-rtl-cls} & {
+//       right: initial;
+//       left: 0;
+//     }
+//   }
 
-  &-footer {
-    .@{dialog-wrap-rtl-cls} & {
-      text-align: left;
-    }
-    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
-      .@{dialog-wrap-rtl-cls} & {
-        margin-right: 8px;
-        margin-left: 0;
-      }
-    }
-  }
+//   &-footer {
+//     .@{dialog-wrap-rtl-cls} & {
+//       text-align: left;
+//     }
+//     .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+//       .@{dialog-wrap-rtl-cls} & {
+//         margin-right: 8px;
+//         margin-left: 0;
+//       }
+//     }
+//   }
 
-  &-confirm {
-    &-body {
-      .@{dialog-wrap-rtl-cls} & {
-        direction: rtl;
-      }
-      > .@{iconfont-css-prefix} {
-        .@{dialog-wrap-rtl-cls} & {
-          float: right;
-          margin-right: 0;
-          margin-left: 16px;
-        }
-        + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
-          .@{dialog-wrap-rtl-cls} & {
-            margin-right: 38px;
-            margin-left: 0;
-          }
-        }
-      }
-    }
+//   &-confirm {
+//     &-body {
+//       .@{dialog-wrap-rtl-cls} & {
+//         direction: rtl;
+//       }
+//       > .@{iconfont-css-prefix} {
+//         .@{dialog-wrap-rtl-cls} & {
+//           float: right;
+//           margin-right: 0;
+//           margin-left: 16px;
+//         }
+//         + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
+//           .@{dialog-wrap-rtl-cls} & {
+//             margin-right: 38px;
+//             margin-left: 0;
+//           }
+//         }
+//       }
+//     }
 
-    &-btns {
-      .@{dialog-wrap-rtl-cls} & {
-        float: left;
-      }
-      .@{ant-prefix}-btn + .@{ant-prefix}-btn {
-        .@{dialog-wrap-rtl-cls} & {
-          margin-right: 8px;
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}
+//     &-btns {
+//       .@{dialog-wrap-rtl-cls} & {
+//         float: left;
+//       }
+//       .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+//         .@{dialog-wrap-rtl-cls} & {
+//           margin-right: 8px;
+//           margin-left: 0;
+//         }
+//       }
+//     }
+//   }
+// }
 
-.@{dialog-prefix-cls}-centered {
-  .@{dialog-prefix-cls} {
-    .@{dialog-wrap-rtl-cls}& {
-      text-align: right;
-    }
-  }
-}
+// .@{dialog-prefix-cls}-centered {
+//   .@{dialog-prefix-cls} {
+//     .@{dialog-wrap-rtl-cls}& {
+//       text-align: right;
+//     }
+//   }
+// }