From 15a071103510e41ffdb3e895f9fbc26e18c76bde Mon Sep 17 00:00:00 2001
From: "C.Y.Kun" <30518686+emojiiii@users.noreply.github.com>
Date: Fri, 11 Feb 2022 23:37:50 +0800
Subject: [PATCH] fix(components): style error when component import order is
 unknown (#5938)

---
 packages/components/alert/__tests__/alert.spec.ts | 2 +-
 packages/components/alert/src/alert.vue           | 4 ++--
 packages/theme-chalk/src/alert.scss               | 9 +++++----
 packages/theme-chalk/src/color-picker.scss        | 4 ++--
 packages/theme-chalk/src/dropdown.scss            | 4 ----
 packages/theme-chalk/src/input.scss               | 6 +-----
 packages/theme-chalk/src/message.scss             | 2 +-
 packages/theme-chalk/src/notification.scss        | 6 +++---
 packages/theme-chalk/src/rate.scss                | 2 +-
 packages/theme-chalk/src/timeline-item.scss       | 2 +-
 10 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/packages/components/alert/__tests__/alert.spec.ts b/packages/components/alert/__tests__/alert.spec.ts
index 77b671ce2a..3bcbe134c8 100644
--- a/packages/components/alert/__tests__/alert.spec.ts
+++ b/packages/components/alert/__tests__/alert.spec.ts
@@ -66,7 +66,7 @@ describe('Alert.vue', () => {
       },
     })
 
-    const closeBtn = wrapper.find('.el-alert__closebtn')
+    const closeBtn = wrapper.find('.el-alert__close-btn')
     expect(closeBtn.exists()).toBe(true)
 
     await closeBtn.trigger('click')
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 6eb1573f67..bc9cc6e8f0 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -26,12 +26,12 @@
         <template v-if="closable">
           <div
             v-if="closeText"
-            :class="[ns.e('closebtn'), ns.is('customed')]"
+            :class="[ns.e('close-btn'), ns.is('customed')]"
             @click="close"
           >
             {{ closeText }}
           </div>
-          <el-icon v-else :class="ns.e('closebtn')" @click="close">
+          <el-icon v-else :class="ns.e('close-btn')" @click="close">
             <close />
           </el-icon>
         </template>
diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
index a19c21f9ea..85ea209672 100644
--- a/packages/theme-chalk/src/alert.scss
+++ b/packages/theme-chalk/src/alert.scss
@@ -21,13 +21,13 @@
   transition: opacity var(--el-transition-duration-fast);
 
   @include when(light) {
-    .#{$namespace}-alert__closebtn {
+    .#{$namespace}-alert__close-btn {
       color: var(--el-text-color-placeholder);
     }
   }
 
   @include when(dark) {
-    .#{$namespace}-alert__closebtn {
+    .#{$namespace}-alert__close-btn {
       color: var(--el-color-white);
     }
     .#{$namespace}-alert__description {
@@ -64,7 +64,7 @@
     padding: 0 8px;
   }
 
-  @include e(icon) {
+  & .#{$namespace}-alert__icon {
     font-size: var(--el-alert-icon-size);
     width: var(--el-alert-icon-size);
     @include when(big) {
@@ -76,6 +76,7 @@
   @include e(title) {
     font-size: var(--el-alert-title-font-size);
     line-height: 18px;
+    vertical-align: text-top;
     @include when(bold) {
       font-weight: bold;
     }
@@ -86,7 +87,7 @@
     margin: 5px 0 0 0;
   }
 
-  @include e(closebtn) {
+  & .#{$namespace}-alert__close-btn {
     font-size: var(--el-alert-close-font-size);
     opacity: 1;
     position: absolute;
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index 4d6b3e681a..c811fe5c97 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -312,12 +312,12 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     height: 100%;
   }
 
-  @include e(empty) {
+  & .#{$namespace}-color-picker__empty {
     font-size: 12px;
     color: var(--el-text-color-secondary);
   }
 
-  @include e(icon) {
+  & .#{$namespace}-color-picker__icon {
     display: inline-flex;
     justify-content: center;
     align-items: center;
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 1757615f2e..2d1545d73f 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -123,10 +123,6 @@ $dropdown-divider-width: 1px !default;
       padding-left: 0;
     }
   }
-  @include e(icon) {
-    font-size: 12px;
-    margin: 0 3px;
-  }
 
   .#{$namespace}-dropdown-selfdefine {
     // 自定义
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 137bc8f591..66ddec5bb1 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -205,16 +205,12 @@
     display: inline-flex;
   }
 
-  @include e(icon) {
+  & .#{$namespace}-input__icon {
     height: inherit;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all var(--el-transition-duration);
-
-    &.#{$namespace}-icon {
-      display: flex;
-    }
   }
 
   @include e(validateIcon) {
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index 891d930a0d..407e528a92 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -79,7 +79,7 @@
     }
   }
 
-  @include e(closeBtn) {
+  & .#{$namespace}-message__closeBtn {
     position: absolute;
     top: 50%;
     right: 15px;
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
index be882051b0..c9b0e8fed1 100644
--- a/packages/theme-chalk/src/notification.scss
+++ b/packages/theme-chalk/src/notification.scss
@@ -57,13 +57,13 @@
     }
   }
 
-  @include e(icon) {
+  & .#{$namespace}-notification__icon {
     height: var(--el-notification-icon-size);
     width: var(--el-notification-icon-size);
     font-size: var(--el-notification-icon-size);
   }
 
-  @include e(closeBtn) {
+  & .#{$namespace}-notification__closeBtn {
     position: absolute;
     top: 18px;
     right: 15px;
@@ -77,7 +77,7 @@
   }
 
   @each $type in (success, info, warning, error) {
-    @include m($type) {
+    & .#{$namespace}-notification--#{$type} {
       --el-notification-icon-color: var(--el-color-#{$type});
       color: var(--el-notification-icon-color);
     }
diff --git a/packages/theme-chalk/src/rate.scss b/packages/theme-chalk/src/rate.scss
index 13c6bd10ee..0138a1716c 100644
--- a/packages/theme-chalk/src/rate.scss
+++ b/packages/theme-chalk/src/rate.scss
@@ -35,7 +35,7 @@ $rate-height: map.merge(
     vertical-align: middle;
   }
 
-  @include e(icon) {
+  & .#{$namespace}-rate__icon {
     position: relative;
     display: inline-block;
     font-size: var(--el-rate-icon-size);
diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss
index a84d7d602b..217f9108de 100644
--- a/packages/theme-chalk/src/timeline-item.scss
+++ b/packages/theme-chalk/src/timeline-item.scss
@@ -18,7 +18,7 @@
     border-left: 2px solid var(--el-timeline-node-color);
   }
 
-  @include e(icon) {
+  & .#{$namespace}-timeline-item__icon {
     color: var(--el-color-white);
     font-size: var(--el-font-size-small);
   }