diff --git a/packages/components/calendar/src/date-table.vue b/packages/components/calendar/src/date-table.vue
index 1b8f87c3fc..3c61ce2c6e 100644
--- a/packages/components/calendar/src/date-table.vue
+++ b/packages/components/calendar/src/date-table.vue
@@ -155,10 +155,10 @@ export default defineComponent({
       if (type === 'current') {
         const date = getFormattedDate(text, type)
         if (date.isSame(props.selectedDay, 'day')) {
-          classes.push('is-selected')
+          classes.push(nsDay.is('selected'))
         }
         if (date.isSame(now, 'day')) {
-          classes.push('is-today')
+          classes.push(nsDay.is('today'))
         }
       }
       return classes
diff --git a/packages/components/pagination/__tests__/pagination.spec.ts b/packages/components/pagination/__tests__/pagination.spec.ts
index 247000dba2..dc4de3d261 100644
--- a/packages/components/pagination/__tests__/pagination.spec.ts
+++ b/packages/components/pagination/__tests__/pagination.spec.ts
@@ -15,7 +15,9 @@ const assertElementsExistence = (
 }
 
 const assertCurrent = (wrapper, page) => {
-  expect(wrapper.find('.el-pager li.active.number').text()).toBe(String(page))
+  expect(wrapper.find('.el-pager li.is-active.number').text()).toBe(
+    String(page)
+  )
 }
 const assertPages = (wrapper, total) => {
   expect(wrapper.find('.el-pagination .el-pager li:last-child').text()).toBe(
diff --git a/packages/components/pagination/src/components/pager.vue b/packages/components/pagination/src/components/pager.vue
index c025790019..e3414cb70b 100644
--- a/packages/components/pagination/src/components/pager.vue
+++ b/packages/components/pagination/src/components/pager.vue
@@ -2,7 +2,10 @@
   <ul :class="nsPager.b()" @click="onPagerClick" @keyup.enter="onEnter">
     <li
       v-if="pageCount > 0"
-      :class="{ active: currentPage === 1, disabled }"
+      :class="[
+        nsPager.is('active', currentPage === 1),
+        nsPager.is('disabled', disabled),
+      ]"
       class="number"
       :aria-current="currentPage === 1"
       tabindex="0"
@@ -11,7 +14,12 @@
     </li>
     <li
       v-if="showPrevMore"
-      :class="['more', 'btn-quickprev', nsIcon.b(), { disabled }]"
+      :class="[
+        'more',
+        'btn-quickprev',
+        nsIcon.b(),
+        nsPager.is('disabled', disabled),
+      ]"
       @mouseenter="onMouseenter('left')"
       @mouseleave="quickPrevHover = false"
     >
@@ -21,7 +29,10 @@
     <li
       v-for="pager in pagers"
       :key="pager"
-      :class="{ active: currentPage === pager, disabled }"
+      :class="[
+        nsPager.is('active', currentPage === pager),
+        nsPager.is('disabled', disabled),
+      ]"
       class="number"
       :aria-current="currentPage === pager"
       tabindex="0"
@@ -30,7 +41,12 @@
     </li>
     <li
       v-if="showNextMore"
-      :class="['more', 'btn-quicknext', nsIcon.b(), { disabled }]"
+      :class="[
+        'more',
+        'btn-quicknext',
+        nsIcon.b(),
+        nsPager.is('disabled', disabled),
+      ]"
       @mouseenter="onMouseenter('right')"
       @mouseleave="quickNextHover = false"
     >
@@ -39,7 +55,10 @@
     </li>
     <li
       v-if="pageCount > 1"
-      :class="{ active: currentPage === pageCount, disabled }"
+      :class="[
+        nsPager.is('active', currentPage === pageCount),
+        nsPager.is('disabled', disabled),
+      ]"
       class="number"
       :aria-current="currentPage === pageCount"
       tabindex="0"
diff --git a/packages/components/slider/src/index.vue b/packages/components/slider/src/index.vue
index 8bb93d4686..28306df473 100644
--- a/packages/components/slider/src/index.vue
+++ b/packages/components/slider/src/index.vue
@@ -12,7 +12,8 @@
       ref="slider"
       :class="[
         ns.e('runway'),
-        { 'show-input': showInput && !range, disabled: sliderDisabled },
+        { 'show-input': showInput && !range },
+        ns.is('disabled', sliderDisabled),
       ]"
       :style="runwayStyle"
       @click="onSliderClick"
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index b4ca539c15..1aefb9b0ef 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -92,7 +92,7 @@
     }
   }
 
-  .#{$namespace}-pager li.disabled {
+  .#{$namespace}-pager li.is-disabled {
     color: var(--el-text-color-placeholder);
     cursor: not-allowed;
   }
@@ -111,7 +111,7 @@
       min-width: 24px;
     }
 
-    .arrow.disabled {
+    .arrow.is-disabled {
       visibility: hidden;
     }
 
@@ -228,7 +228,7 @@
       min-width: 32px;
       border-radius: 2px;
 
-      &.disabled {
+      &.is-disabled {
         color: var(--el-text-color-placeholder);
         background-color: var(--el-disabled-bg-color);
       }
@@ -253,12 +253,12 @@
       }
     }
 
-    .#{$namespace}-pager li:not(.disabled) {
+    .#{$namespace}-pager li:not(.is-disabled) {
       &:hover {
         color: var(--el-pagination-hover-color);
       }
 
-      &.active {
+      &.is-active {
         background-color: var(--el-color-primary);
         color: var(--el-color-white);
         font-weight: bold;
@@ -311,7 +311,7 @@
       line-height: 32px;
       color: var(--el-pagination-button-color);
 
-      &.disabled {
+      &.is-disabled {
         color: var(--el-text-color-placeholder);
         cursor: not-allowed;
       }
@@ -321,7 +321,7 @@
       }
     }
 
-    &.active + li {
+    &.is-active + li {
       border-left: 0;
     }
 
@@ -333,7 +333,7 @@
       color: var(--el-pagination-hover-color);
     }
 
-    &.active {
+    &.is-active {
       color: var(--el-pagination-hover-color);
       cursor: default;
     }
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index aeafa15b8c..d96d9d264c 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -38,7 +38,7 @@ $slider-height: map.merge(
       width: auto;
     }
 
-    &.disabled {
+    &.is-disabled {
       cursor: default;
 
       .#{$namespace}-slider__bar {