fix(components): style error when component import order is unknown (#5938)

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')

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>

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;

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;

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 {
     // 自定义

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) {

packages/theme-chalk/src/message.scss

@@ -79,7 +79,7 @@
     }
   }
 
-  @include e(closeBtn) {
+  & .#{$namespace}-message__closeBtn {
     position: absolute;
     top: 50%;
     right: 15px;

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);
     }

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);

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);
   }