Collapse: fix nested collapse-item style (#9566)

packages/collapse/src/collapse-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="el-collapse-item" :class="{'is-active': isActive}">
+  <div class="el-collapse-item">
     <div
       role="tab"
       :aria-expanded="isActive"
@@ -13,11 +13,17 @@
         :id="`el-collapse-head-${id}`"
         tabindex="0"
         @keyup.space.enter.stop="handleEnterClick"
-        :class="{'focusing': focusing}"
+        :class="{
+          'focusing': focusing,
+          'is-active': isActive
+        }"
         @focus="handleFocus"
         @blur="focusing = false"
       >
-        <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right"
+          :class="{'is-active': isActive}">
+        </i>
         <slot name="title">{{title}}</slot>
       </div>
     </div>

packages/theme-chalk/src/collapse.scss

@@ -23,10 +23,16 @@
       float: right;
       line-height: 48px;
       font-weight: 300;
+      @include when(active) {
+        transform: rotate(90deg);
+      }
     }
     &.focusing:focus:not(:hover){
       color: $--color-primary;
     }
+    @include when(active) {
+      border-bottom-color: transparent;
+    }
   }
 
   @include e(wrap) {
@@ -44,15 +50,6 @@
     line-height: 1.769230769230769;
   }
 
-  @include when(active) {
-    .el-collapse-item__header {
-      border-bottom-color: transparent;
-      .el-collapse-item__arrow {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
   &:last-child {
     margin-bottom: -1px;
   }