fix(Modal): 修复BasicModal跟原生Modal样式冲突问题 (#3720)

src/components/Modal/src/index.less

@@ -1,3 +1,5 @@
+@prefix-cls: ~'@{namespace}-basic-modal-wrap';
+
 .fullscreen-modal {
   overflow: hidden;
 
@@ -18,103 +20,105 @@
   }
 }
 
-.ant-modal {
-  width: 520px;
-  padding-bottom: 0;
+.@{prefix-cls} {
+  .ant-modal {
+    width: 520px;
+    padding-bottom: 0;
 
-  .ant-modal-body > .scrollbar {
-    padding: 14px;
-  }
+    .ant-modal-body > .scrollbar {
+      padding: 14px;
+    }
 
-  &-title {
-    font-size: 16px;
-    font-weight: bold;
+    &-title {
+      font-size: 16px;
+      font-weight: bold;
 
-    .base-title {
-      cursor: move !important;
+      .base-title {
+        cursor: move !important;
+      }
     }
-  }
 
-  .ant-modal-body {
-    padding: 0;
+    .ant-modal-body {
+      padding: 0;
 
-    > .scrollbar > .scrollbar__bar.is-horizontal {
-      display: none;
+      > .scrollbar > .scrollbar__bar.is-horizontal {
+        display: none;
+      }
     }
-  }
 
-  &-large {
-    top: 60px;
+    &-large {
+      top: 60px;
 
-    &--mini {
-      top: 16px;
+      &--mini {
+        top: 16px;
+      }
     }
-  }
 
-  &-header {
-    padding: 16px;
-    border-bottom: 1px solid @border-color-base;
-  }
+    &-header {
+      padding: 16px;
+      border-bottom: 1px solid @border-color-base;
+    }
 
-  &-content {
-    padding: 0 !important;
-    box-shadow:
-      0 4px 8px 0 rgb(0 0 0 / 20%),
-      0 6px 20px 0 rgb(0 0 0 / 19%);
-  }
+    &-content {
+      padding: 0 !important;
+      box-shadow:
+        0 4px 8px 0 rgb(0 0 0 / 20%),
+        0 6px 20px 0 rgb(0 0 0 / 19%);
+    }
 
-  &-footer {
-    padding: 10px 16px;
-    border-top: 1px solid @border-color-base;
+    &-footer {
+      padding: 10px 16px;
+      border-top: 1px solid @border-color-base;
 
-    button + button {
-      margin-left: 10px;
+      button + button {
+        margin-left: 10px;
+      }
     }
-  }
 
-  &-close {
-    top: 0 !important;
-    right: 0 !important;
-    width: auto !important;
-    outline: none;
-    background: transparent !important;
-    font-weight: normal;
-  }
+    &-close {
+      top: 0 !important;
+      right: 0 !important;
+      width: auto !important;
+      outline: none;
+      background: transparent !important;
+      font-weight: normal;
+    }
 
-  &-close-x {
-    display: inline-block;
-    width: 96px;
-    height: 56px;
-    line-height: 56px !important;
-  }
+    &-close-x {
+      display: inline-block;
+      width: 96px;
+      height: 56px;
+      line-height: 56px !important;
+    }
 
-  &-confirm-body {
-    .ant-modal-confirm-content {
-      > * {
-        color: @text-color-help-dark;
+    &-confirm-body {
+      .ant-modal-confirm-content {
+        > * {
+          color: @text-color-help-dark;
+        }
       }
     }
-  }
 
-  &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
-    color: @error-color;
-  }
+    &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+      color: @error-color;
+    }
 
-  &-confirm-btns {
-    .ant-btn:last-child {
-      margin-right: 0;
+    &-confirm-btns {
+      .ant-btn:last-child {
+        margin-right: 0;
+      }
     }
-  }
 
-  &-confirm-info {
-    .ant-modal-confirm-body > .anticon {
-      color: @warning-color;
+    &-confirm-info {
+      .ant-modal-confirm-body > .anticon {
+        color: @warning-color;
+      }
     }
-  }
 
-  &-confirm-confirm.success {
-    .ant-modal-confirm-body > .anticon {
-      color: @success-color;
+    &-confirm-confirm.success {
+      .ant-modal-confirm-body > .anticon {
+        color: @success-color;
+      }
     }
   }
 }