diff --git a/packages/theme-chalk/src/alert.scss b/packages/theme-chalk/src/alert.scss
index 500560b2ba..c8c6ac593f 100644
--- a/packages/theme-chalk/src/alert.scss
+++ b/packages/theme-chalk/src/alert.scss
@@ -16,16 +16,16 @@
   transition: opacity .2s;
 
   @include when(light) {
-    .el-alert__closebtn {
+    .#{$namespace}-alert__closebtn {
       color: $--color-text-placeholder;
     }
   }
 
   @include when(dark) {
-    .el-alert__closebtn {
+    .#{$namespace}-alert__closebtn {
       color: $--color-white;
     }
-    .el-alert__description {
+    .#{$namespace}-alert__description {
       color: $--color-white;
     }
   }
@@ -39,7 +39,7 @@
       background-color: $--alert-success-color;
       color: $--color-success;
 
-      .el-alert__description {
+      .#{$namespace}-alert__description {
         color: $--color-success;
       }
     }
@@ -61,7 +61,7 @@
       color: $--color-white;
     }
 
-    .el-alert__description {
+    .#{$namespace}-alert__description {
       color: $--color-info;
     }
   }
@@ -71,7 +71,7 @@
       background-color: $--alert-warning-color;
       color: $--color-warning;
 
-      .el-alert__description {
+      .#{$namespace}-alert__description {
         color: $--color-warning;
       }
     }
@@ -87,7 +87,7 @@
       background-color: $--alert-danger-color;
       color: $--color-danger;
 
-      .el-alert__description {
+      .#{$namespace}-alert__description {
         color: $--color-danger;
       }
     }
@@ -120,7 +120,7 @@
     }
   }
 
-  & .el-alert__description {
+  & .#{$namespace}-alert__description {
     font-size: $--alert-description-font-size;
     margin: 5px 0 0 0;
   }
@@ -141,7 +141,7 @@
   }
 }
 
-.el-alert-fade-enter,
-.el-alert-fade-leave-active {
+.#{$namespace}-alert-fade-enter,
+.#{$namespace}-alert-fade-leave-active {
   opacity: 0;
 }
diff --git a/packages/theme-chalk/src/autocomplete.scss b/packages/theme-chalk/src/autocomplete.scss
index c59262d39f..cd9d3b717b 100644
--- a/packages/theme-chalk/src/autocomplete.scss
+++ b/packages/theme-chalk/src/autocomplete.scss
@@ -78,7 +78,7 @@
       }
     }
 
-    & .el-icon-loading {
+    & .#{$namespace}-icon-loading {
       vertical-align: middle;
     }
   }
diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
index 3c3c3e1d8d..c20cc3b872 100644
--- a/packages/theme-chalk/src/breadcrumb.scss
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -38,8 +38,8 @@
     }
 
     &:last-child {
-      .el-breadcrumb__inner,
-      .el-breadcrumb__inner a {
+      .#{$namespace}-breadcrumb__inner,
+      .#{$namespace}-breadcrumb__inner a {
         &, &:hover {
           font-weight: normal;
           color: $--color-text-regular;
@@ -47,7 +47,7 @@
         }
       }
 
-      .el-breadcrumb__separator {
+      .#{$namespace}-breadcrumb__separator {
         display: none;
       }
     }
diff --git a/packages/theme-chalk/src/button.scss b/packages/theme-chalk/src/button.scss
index 7a49ae2089..201d23c51f 100644
--- a/packages/theme-chalk/src/button.scss
+++ b/packages/theme-chalk/src/button.scss
@@ -45,7 +45,7 @@
     border: 0;
   }
 
-  & [class*="el-icon-"] {
+  & [class*="#{$namespace}-icon-"] {
     & + span {
       margin-left: 5px;
     }
@@ -83,7 +83,7 @@
       border-color: $--button-disabled-border-color;
     }
 
-    &.el-button--text {
+    &.#{$namespace}-button--text {
       background-color: transparent;
     }
 
@@ -193,10 +193,10 @@
   display: inline-block;
   vertical-align: middle;
 
-  & > .el-button {
+  & > .#{$namespace}-button {
     float: left;
     position: relative;
-    & + .el-button {
+    & + .#{$namespace}-button {
       margin-left: 0;
     }
     &.is-disabled {
@@ -242,8 +242,8 @@
     }
   }
 
-  & > .el-dropdown {
-    & > .el-button {
+  & > .#{$namespace}-dropdown {
+    & > .#{$namespace}-button {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left-color: rgba($--color-white, 0.5);
@@ -251,7 +251,7 @@
   }
 
   @each $type in (primary, success, warning, danger, info) {
-    .el-button--#{$type} {
+    .#{$namespace}-button--#{$type} {
       &:first-child {
         border-right-color: rgba($--color-white, 0.5);
       }
diff --git a/packages/theme-chalk/src/calendar.scss b/packages/theme-chalk/src/calendar.scss
index 1364861017..ae517c7d1c 100644
--- a/packages/theme-chalk/src/calendar.scss
+++ b/packages/theme-chalk/src/calendar.scss
@@ -63,7 +63,7 @@
     border-left: $--calendar-border;
   }
 
-  tr.el-calendar-table__row--hide-border td {
+  tr.#{$namespace}-calendar-table__row--hide-border td {
     border-top: none;
   }
 
diff --git a/packages/theme-chalk/src/carousel-item.scss b/packages/theme-chalk/src/carousel-item.scss
index 6280ebd3c9..16f079216a 100644
--- a/packages/theme-chalk/src/carousel-item.scss
+++ b/packages/theme-chalk/src/carousel-item.scss
@@ -26,8 +26,8 @@
       &.is-in-stage {
         cursor: pointer;
         z-index: $--index-normal;
-        &:hover .el-carousel__mask,
-        &.is-hover .el-carousel__mask {
+        &:hover .#{$namespace}-carousel__mask,
+        &.is-hover .#{$namespace}-carousel__mask {
           opacity: 0.12;
         }
       }
diff --git a/packages/theme-chalk/src/carousel.scss b/packages/theme-chalk/src/carousel.scss
index cfca9626df..7527e25814 100644
--- a/packages/theme-chalk/src/carousel.scss
+++ b/packages/theme-chalk/src/carousel.scss
@@ -77,7 +77,7 @@
       text-align: center;
       position: static;
       transform: none;
-      .el-carousel__indicator:hover button {
+      .#{$namespace}-carousel__indicator:hover button {
         opacity: 0.64;
       }
       button {
@@ -92,14 +92,14 @@
       transform: none;
       text-align: center;
 
-      .el-carousel__button {
+      .#{$namespace}-carousel__button {
         height: auto;
         width: auto;
         padding: 2px 18px;
         font-size: 12px;
       }
 
-      .el-carousel__indicator {
+      .#{$namespace}-carousel__indicator {
         padding: 6px 4px;
       }
     }
@@ -120,7 +120,7 @@
 
     @include m(vertical) {
       padding: $--carousel-indicator-padding-horizontal $--carousel-indicator-padding-vertical;
-      .el-carousel__button {
+      .#{$namespace}-carousel__button {
         width: $--carousel-indicator-height;
         height: #{$--carousel-indicator-width / 2};
       }
diff --git a/packages/theme-chalk/src/cascader-panel.scss b/packages/theme-chalk/src/cascader-panel.scss
index 4c8e3687fe..a6398142d0 100644
--- a/packages/theme-chalk/src/cascader-panel.scss
+++ b/packages/theme-chalk/src/cascader-panel.scss
@@ -23,7 +23,7 @@
 
   &:last-child {
     border-right: none;
-    .el-cascader-node {
+    .#{$namespace}-cascader-node {
       padding-right: 20px;
     }
   }
@@ -111,10 +111,10 @@
     text-overflow: ellipsis;
   }
 
-  > .el-radio {
+  > .#{$namespace}-radio {
     margin-right: 0;
 
-    .el-radio__label {
+    .#{$namespace}-radio__label {
       padding-left: 0;
     }
   }
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index cc708e1df1..496d7fd73f 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -13,16 +13,16 @@
   outline: none;
 
   &:not(.is-disabled):hover {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       cursor: pointer;
       border-color: $--input-hover-border;
     }
   }
 
-  .el-input {
+  .#{$namespace}-input {
     cursor: pointer;
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       text-overflow: ellipsis;
 
       &:focus {
@@ -30,7 +30,7 @@
       }
     }
 
-    .el-icon-arrow-down {
+    .#{$namespace}-icon-arrow-down {
       transition: transform .3s;
       font-size: 14px;
 
@@ -39,12 +39,12 @@
       }
     }
 
-    .el-icon-circle-close:hover {
+    .#{$namespace}-icon-circle-close:hover {
       color: $--input-clear-hover-color;
     }
 
     @include when(focus) {
-      .el-input__inner {
+      .#{$namespace}-input__inner {
         border-color: $--input-focus-border;
       }
     }
@@ -66,7 +66,7 @@
   }
 
   @include when(disabled) {
-    .el-cascader__label {
+    .#{$namespace}-cascader__label {
       z-index: #{$--index-normal + 1};
       color: $--disabled-color-base;
     }
@@ -95,7 +95,7 @@
     text-align: left;
     box-sizing: border-box;
 
-    .el-tag {
+    .#{$namespace}-tag {
       display: inline-flex;
       align-items: center;
       max-width: 100%;
@@ -113,7 +113,7 @@
         text-overflow: ellipsis;
       }
 
-      .el-icon-close {
+      .#{$namespace}-icon-close {
         flex: none;
         background-color: $--color-text-placeholder;
         color: $--color-white;
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
index 7c1b9388aa..397b187682 100644
--- a/packages/theme-chalk/src/checkbox.scss
+++ b/packages/theme-chalk/src/checkbox.scss
@@ -31,37 +31,37 @@
       cursor: not-allowed;
     }
 
-    & + .el-checkbox.is-bordered {
+    & + .#{$namespace}-checkbox.is-bordered {
       margin-left: 10px;
     }
 
-    &.el-checkbox--medium {
+    &.#{$namespace}-checkbox--medium {
       padding: $--checkbox-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
       height: $--checkbox-bordered-medium-height;
 
-      .el-checkbox__label {
+      .#{$namespace}-checkbox__label {
         line-height: 17px;
         font-size: $--button-medium-font-size;
       }
 
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         height: $--checkbox-bordered-medium-input-height;
         width: $--checkbox-bordered-medium-input-width;
       }
     }
 
-    &.el-checkbox--small {
+    &.#{$namespace}-checkbox--small {
       padding: $--checkbox-bordered-small-padding;
       border-radius: $--button-small-border-radius;
       height: $--checkbox-bordered-small-height;
 
-      .el-checkbox__label {
+      .#{$namespace}-checkbox__label {
         line-height: 15px;
         font-size: $--button-small-font-size;
       }
 
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         height: $--checkbox-bordered-small-input-height;
         width: $--checkbox-bordered-small-input-width;
 
@@ -72,17 +72,17 @@
       }
     }
 
-    &.el-checkbox--mini {
+    &.#{$namespace}-checkbox--mini {
       padding: $--checkbox-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
       height: $--checkbox-bordered-mini-height;
 
-      .el-checkbox__label {
+      .#{$namespace}-checkbox__label {
         line-height: 12px;
         font-size: $--button-mini-font-size;
       }
 
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         height: $--checkbox-bordered-mini-input-height;
         width: $--checkbox-bordered-mini-input-width;
         &::after {
@@ -103,7 +103,7 @@
     vertical-align: middle;
 
     @include when(disabled) {
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         background-color: $--checkbox-disabled-input-fill;
         border-color: $--checkbox-disabled-border-color;
         cursor: not-allowed;
@@ -113,13 +113,13 @@
           border-color: $--checkbox-disabled-icon-color;
         }
 
-        & + .el-checkbox__label {
+        & + .#{$namespace}-checkbox__label {
           cursor: not-allowed;
         }
       }
 
       &.is-checked {
-        .el-checkbox__inner {
+        .#{$namespace}-checkbox__inner {
           background-color: $--checkbox-disabled-checked-input-fill;
           border-color: $--checkbox-disabled-checked-input-border-color;
 
@@ -130,7 +130,7 @@
       }
 
       &.is-indeterminate {
-        .el-checkbox__inner {
+        .#{$namespace}-checkbox__inner {
           background-color: $--checkbox-disabled-checked-input-fill;
           border-color: $--checkbox-disabled-checked-input-border-color;
 
@@ -141,14 +141,14 @@
         }
       }
 
-      & + span.el-checkbox__label {
+      & + span.#{$namespace}-checkbox__label {
         color: $--disabled-color-base;
         cursor: not-allowed;
       }
     }
 
     @include when(checked) {
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         background-color: $--checkbox-checked-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
@@ -157,17 +157,17 @@
         }
       }
 
-      & + .el-checkbox__label {
+      & + .#{$namespace}-checkbox__label {
         color: $--checkbox-checked-font-color;
       }
     }
     @include when(focus) { /*focus时 视觉上区分*/
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         border-color: $--checkbox-input-border-color-hover;
       }
     }
     @include when(indeterminate) {
-      .el-checkbox__inner {
+      .#{$namespace}-checkbox__inner {
         background-color: $--checkbox-checked-background-color;
         border-color: $--checkbox-checked-input-border-color;
 
@@ -275,7 +275,7 @@
       color: $--color-primary;
     }
 
-    & [class*="el-icon-"] {
+    & [class*="#{$namespace}-icon-"] {
       line-height: 0.9;
 
       & + span {
@@ -293,19 +293,19 @@
   }
 
   &.is-checked {
-    & .el-checkbox-button__inner {
+    & .#{$namespace}-checkbox-button__inner {
       color: $--checkbox-button-checked-font-color;
       background-color: $--checkbox-button-checked-background-color;
       border-color: $--checkbox-button-checked-border-color;
       box-shadow: -1px 0 0 0 $--color-primary-light-4;
     }
-    &:first-child .el-checkbox-button__inner {
+    &:first-child .#{$namespace}-checkbox-button__inner {
       border-left-color: $--checkbox-button-checked-border-color;
     }
   }
 
   &.is-disabled {
-    & .el-checkbox-button__inner {
+    & .#{$namespace}-checkbox-button__inner {
       color: $--button-disabled-font-color;
       cursor: not-allowed;
       background-image: none;
@@ -313,13 +313,13 @@
       border-color: $--button-disabled-border-color;
       box-shadow: none;
     }
-    &:first-child .el-checkbox-button__inner {
+    &:first-child .#{$namespace}-checkbox-button__inner {
       border-left-color: $--button-disabled-border-color;
     }
   }
 
   &:first-child {
-    .el-checkbox-button__inner {
+    .#{$namespace}-checkbox-button__inner {
       border-left: $--border-base;
       border-radius: $--border-radius-base 0 0 $--border-radius-base;
       box-shadow: none !important;
@@ -327,28 +327,28 @@
   }
 
   &.is-focus {
-    & .el-checkbox-button__inner {
+    & .#{$namespace}-checkbox-button__inner {
       border-color: $--checkbox-button-checked-border-color;
     }
   }
 
   &:last-child {
-    .el-checkbox-button__inner {
+    .#{$namespace}-checkbox-button__inner {
       border-radius: 0 $--border-radius-base $--border-radius-base 0;
     }
   }
   @include m(medium) {
-    .el-checkbox-button__inner {
+    .#{$namespace}-checkbox-button__inner {
       @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
     }
   }
   @include m(small) {
-    .el-checkbox-button__inner {
+    .#{$namespace}-checkbox-button__inner {
       @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
     }
   }
   @include m(mini) {
-    .el-checkbox-button__inner {
+    .#{$namespace}-checkbox-button__inner {
       @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
     }
   }
diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
index fc9953d3c6..112529d7bb 100644
--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -1,7 +1,7 @@
 @import './common/var.scss';
 @import './mixins/mixins.scss';
 
-[class*='el-col-'] {
+[class*='#{$namespace}-col-'] {
   float: left;
   box-sizing: border-box;
   @include when(guttered) {
@@ -10,7 +10,7 @@
   }
 }
 
-.el-col-0 {
+.#{$namespace}-col-0 {
   display: none;
   // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
   @include when(guttered) {
@@ -19,49 +19,49 @@
 }
 
 @for $i from 0 through 24 {
-  .el-col-#{$i} {
+  .#{$namespace}-col-#{$i} {
     max-width: (1 / 24 * $i * 100) * 1%;
     flex: 0 0 (1 / 24 * $i * 100) * 1%;
   }
 
-  .el-col-offset-#{$i} {
+  .#{$namespace}-col-offset-#{$i} {
     margin-left: (1 / 24 * $i * 100) * 1%;
   }
 
-  .el-col-pull-#{$i} {
+  .#{$namespace}-col-pull-#{$i} {
     position: relative;
     right: (1 / 24 * $i * 100) * 1%;
   }
 
-  .el-col-push-#{$i} {
+  .#{$namespace}-col-push-#{$i} {
     position: relative;
     left: (1 / 24 * $i * 100) * 1%;
   }
 }
 
 @include res(xs) {
-  .el-col-xs-0 {
+  .#{$namespace}-col-xs-0 {
     display: none;
     @include when(guttered) {
       display: none;
     }
   }
   @for $i from 0 through 24 {
-    .el-col-xs-#{$i} {
+    .#{$namespace}-col-xs-#{$i} {
       max-width: (1 / 24 * $i * 100) * 1%;
       flex: 0 0 (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xs-offset-#{$i} {
+    .#{$namespace}-col-xs-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xs-pull-#{$i} {
+    .#{$namespace}-col-xs-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xs-push-#{$i} {
+    .#{$namespace}-col-xs-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
@@ -69,28 +69,28 @@
 }
 
 @include res(sm) {
-  .el-col-sm-0 {
+  .#{$namespace}-col-sm-0 {
     display: none;
     @include when(guttered) {
       display: none;
     }
   }
   @for $i from 0 through 24 {
-    .el-col-sm-#{$i} {
+    .#{$namespace}-col-sm-#{$i} {
       max-width: (1 / 24 * $i * 100) * 1%;
       flex: 0 0 (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-sm-offset-#{$i} {
+    .#{$namespace}-col-sm-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-sm-pull-#{$i} {
+    .#{$namespace}-col-sm-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-sm-push-#{$i} {
+    .#{$namespace}-col-sm-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
@@ -98,28 +98,28 @@
 }
 
 @include res(md) {
-  .el-col-md-0 {
+  .#{$namespace}-col-md-0 {
     display: none;
     @include when(guttered) {
       display: none;
     }
   }
   @for $i from 0 through 24 {
-    .el-col-md-#{$i} {
+    .#{$namespace}-col-md-#{$i} {
       max-width: (1 / 24 * $i * 100) * 1%;
       flex: 0 0 (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-md-offset-#{$i} {
+    .#{$namespace}-col-md-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-md-pull-#{$i} {
+    .#{$namespace}-col-md-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-md-push-#{$i} {
+    .#{$namespace}-col-md-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
@@ -127,28 +127,28 @@
 }
 
 @include res(lg) {
-  .el-col-lg-0 {
+  .#{$namespace}-col-lg-0 {
     display: none;
     @include when(guttered) {
       display: none;
     }
   }
   @for $i from 0 through 24 {
-    .el-col-lg-#{$i} {
+    .#{$namespace}-col-lg-#{$i} {
       max-width: (1 / 24 * $i * 100) * 1%;
       flex: 0 0 (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-lg-offset-#{$i} {
+    .#{$namespace}-col-lg-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-lg-pull-#{$i} {
+    .#{$namespace}-col-lg-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-lg-push-#{$i} {
+    .#{$namespace}-col-lg-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
@@ -156,28 +156,28 @@
 }
 
 @include res(xl) {
-  .el-col-xl-0 {
+  .#{$namespace}-col-xl-0 {
     display: none;
     @include when(guttered) {
       display: none;
     }
   }
   @for $i from 0 through 24 {
-    .el-col-xl-#{$i} {
+    .#{$namespace}-col-xl-#{$i} {
       max-width: (1 / 24 * $i * 100) * 1%;
       flex: 0 0 (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xl-offset-#{$i} {
+    .#{$namespace}-col-xl-offset-#{$i} {
       margin-left: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xl-pull-#{$i} {
+    .#{$namespace}-col-xl-pull-#{$i} {
       position: relative;
       right: (1 / 24 * $i * 100) * 1%;
     }
 
-    .el-col-xl-push-#{$i} {
+    .#{$namespace}-col-xl-push-#{$i} {
       position: relative;
       left: (1 / 24 * $i * 100) * 1%;
     }
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index ffe78f39ce..feccaf7b52 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -8,7 +8,7 @@
 }
 @include b(collapse-item) {
   @include when(disabled) {
-    .el-collapse-item__header {
+    .#{$namespace}-collapse-item__header {
       color: $--font-color-disabled-base;
       cursor: not-allowed;
     }
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index eb26c5d620..d179f51695 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -79,7 +79,7 @@
     height: 180px;
     padding: 2px 0;
 
-    .el-color-hue-slider__bar {
+    .#{$namespace}-color-hue-slider__bar {
       background: linear-gradient(
         to bottom, #f00 0%,
         #ff0 17%, #0f0 33%,
@@ -87,7 +87,7 @@
         #f0f 83%, #f00 100%);
     }
 
-    .el-color-hue-slider__thumb {
+    .#{$namespace}-color-hue-slider__thumb {
       left: 0;
       top: 0;
       width: 100%;
@@ -165,13 +165,13 @@
     width: 20px;
     height: 180px;
 
-    .el-color-alpha-slider__bar {
+    .#{$namespace}-color-alpha-slider__bar {
       background: linear-gradient(
         to bottom, rgba(255, 255, 255, 0) 0%,
         rgba(255, 255, 255, 1) 100%);
     }
 
-    .el-color-alpha-slider__thumb {
+    .#{$namespace}-color-alpha-slider__thumb {
       left: 0;
       top: 0;
       width: 100%;
@@ -246,7 +246,7 @@
   height: 40px;
 
   @include when(disabled) {
-    .el-color-picker__trigger {
+    .#{$namespace}-color-picker__trigger {
       cursor: not-allowed;
     }
   }
@@ -254,12 +254,12 @@
   @include m(medium) {
     height: 36px;
 
-    .el-color-picker__trigger {
+    .#{$namespace}-color-picker__trigger {
       height: 36px;
       width: 36px;
     }
 
-    .el-color-picker__mask {
+    .#{$namespace}-color-picker__mask {
       height: 34px;
       width: 34px;
     }
@@ -268,18 +268,18 @@
   @include m(small) {
     height: 32px;
 
-    .el-color-picker__trigger {
+    .#{$namespace}-color-picker__trigger {
       height: 32px;
       width: 32px;
     }
 
-    .el-color-picker__mask {
+    .#{$namespace}-color-picker__mask {
       height: 30px;
       width: 30px;
     }
 
-    .el-color-picker__icon,
-    .el-color-picker__empty {
+    .#{$namespace}-color-picker__icon,
+    .#{$namespace}-color-picker__empty {
       transform: translate3d(-50%, -50%, 0) scale(0.8);
     }
   }
@@ -287,18 +287,18 @@
   @include m(mini) {
     height: 28px;
 
-    .el-color-picker__trigger {
+    .#{$namespace}-color-picker__trigger {
       height: 28px;
       width: 28px;
     }
 
-    .el-color-picker__mask {
+    .#{$namespace}-color-picker__mask {
       height: 26px;
       width: 26px;
     }
 
-    .el-color-picker__icon,
-    .el-color-picker__empty {
+    .#{$namespace}-color-picker__icon,
+    .#{$namespace}-color-picker__empty {
       transform: translate3d(-50%, -50%, 0) scale(0.8);
     }
   }
@@ -380,7 +380,7 @@
     background-color: $--color-white;
     border-radius: $--border-radius-base;
     box-shadow: $--dropdown-menu-box-shadow;
-    &.el-popper{
+    &.#{$namespace}-popper{
       border: 1px solid $--border-color-lighter;
     }
   }
diff --git a/packages/theme-chalk/src/common/transition.scss b/packages/theme-chalk/src/common/transition.scss
index 037b59de12..eb39d7ed72 100644
--- a/packages/theme-chalk/src/common/transition.scss
+++ b/packages/theme-chalk/src/common/transition.scss
@@ -1,3 +1,4 @@
+@import '../mixins/config';
 @import "var";
 
 .fade-in-linear-enter-active,
@@ -10,36 +11,36 @@
   opacity: 0;
 }
 
-.el-fade-in-linear-enter-active,
-.el-fade-in-linear-leave-active {
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
   transition: $--fade-linear-transition;
 }
-.el-fade-in-linear-enter-from,
-.el-fade-in-linear-leave-to {
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
   opacity: 0;
 }
 
-.el-fade-in-enter-active,
-.el-fade-in-leave-active {
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.el-fade-in-enter-from,
-.el-fade-in-leave-active {
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
   opacity: 0;
 }
 
-.el-zoom-in-center-enter-active,
-.el-zoom-in-center-leave-active {
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.el-zoom-in-center-enter-from,
-.el-zoom-in-center-leave-active {
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
   opacity: 0;
   transform: scaleX(0);
 }
 
-.el-zoom-in-top-enter-active,
-.el-zoom-in-top-leave-active {
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: $--md-fade-transition;
@@ -49,34 +50,34 @@
     transform-origin: center bottom;
   }
 }
-.el-zoom-in-top-enter-from,
-.el-zoom-in-top-leave-active {
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.el-zoom-in-bottom-enter-active,
-.el-zoom-in-bottom-leave-active {
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: $--md-fade-transition;
   transform-origin: center bottom;
 }
-.el-zoom-in-bottom-enter-from,
-.el-zoom-in-bottom-leave-active {
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.el-zoom-in-left-enter-active,
-.el-zoom-in-left-leave-active {
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
   opacity: 1;
   transform: scale(1, 1);
   transition: $--md-fade-transition;
   transform-origin: top left;
 }
-.el-zoom-in-left-enter-from,
-.el-zoom-in-left-leave-active {
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
   opacity: 0;
   transform: scale(.45, .45);
 }
@@ -88,15 +89,15 @@
   transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
 }
 
-.el-list-enter-active,
-.el-list-leave-active {
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
   transition: all 1s;
 }
-.el-list-enter-from, .el-list-leave-active {
+.#{$namespace}-list-enter-from, .#{$namespace}-list-leave-active {
   opacity: 0;
   transform: translateY(-30px);
 }
 
-.el-opacity-transition {
+.#{$namespace}-opacity-transition {
   transition: opacity .3s cubic-bezier(.55,0,.1,1);
 }
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 830d71605e..056a0bcdc2 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1,4 +1,5 @@
 /* Element Chalk Variables */
+@import "../mixins/config";
 
 // Special comment for theme configurator
 // type|skipAutoTranslation|Category|Order
diff --git a/packages/theme-chalk/src/date-picker/date-picker.scss b/packages/theme-chalk/src/date-picker/date-picker.scss
index 7488920e29..fe16166234 100644
--- a/packages/theme-chalk/src/date-picker/date-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-picker.scss
@@ -13,11 +13,11 @@
     width: 438px;
   }
 
-  &.has-time .el-picker-panel__body-wrapper {
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
     position: relative;
   }
 
-  .el-picker-panel__content {
+  .#{$namespace}-picker-panel__content {
     width: 292px;
   }
 
@@ -51,7 +51,7 @@
       padding-bottom: 12px;
       border-bottom: solid 1px $--border-color-lighter;
 
-      & + .el-picker-panel__content {
+      & + .#{$namespace}-picker-panel__content {
         margin-top: 0;
       }
     }
@@ -95,7 +95,7 @@
     margin-left: 10px;
   }
 
-  .el-time-panel {
+  .#{$namespace}-time-panel {
     position: absolute;
   }
 }
diff --git a/packages/theme-chalk/src/date-picker/date-range-picker.scss b/packages/theme-chalk/src/date-picker/date-range-picker.scss
index 6bb1c8e14b..20292b2be0 100644
--- a/packages/theme-chalk/src/date-picker/date-range-picker.scss
+++ b/packages/theme-chalk/src/date-picker/date-range-picker.scss
@@ -12,11 +12,11 @@
     width: 100%;
   }
 
-  .el-picker-panel__body {
+  .#{$namespace}-picker-panel__body {
     min-width: 513px;
   }
 
-  .el-picker-panel__content {
+  .#{$namespace}-picker-panel__content {
     margin: 0;
   }
 
@@ -50,7 +50,7 @@
     @include when(left) {
       border-right: 1px solid $--datepicker-inner-border-color;
     }
-    .el-date-range-picker__header {
+    .#{$namespace}-date-range-picker__header {
 
       div {
         margin-left: 50px;
@@ -77,7 +77,7 @@
     width: 100%;
     box-sizing: border-box;
 
-    > .el-icon-arrow-right {
+    > .#{$namespace}-icon-arrow-right {
       font-size: 20px;
       vertical-align: middle;
       display: table-cell;
@@ -90,14 +90,14 @@
     display: table-cell;
     padding: 0 5px;
 
-    .el-picker-panel {
+    .#{$namespace}-picker-panel {
       position: absolute;
       top: 13px;
       right: 0;
       z-index: 1;
       background: $--color-white;
     }
-    .el-time-panel {
+    .#{$namespace}-time-panel {
       position: absolute;
     }
   }
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 5fed1bbd30..01e7f9c339 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -6,7 +6,7 @@
   user-select: none;
 
   @include when(week-mode) {
-    .el-date-table__row {
+    .#{$namespace}-date-table__row {
       &:hover {
         div {
           background-color: $--datepicker-inrange-background-color;
diff --git a/packages/theme-chalk/src/date-picker/picker-panel.scss b/packages/theme-chalk/src/date-picker/picker-panel.scss
index 7af9ea5c5c..da808d6828 100644
--- a/packages/theme-chalk/src/date-picker/picker-panel.scss
+++ b/packages/theme-chalk/src/date-picker/picker-panel.scss
@@ -7,7 +7,7 @@
   border-radius: $--border-radius-base;
   line-height: 30px;
 
-  .el-time-panel {
+  .#{$namespace}-time-panel {
     margin: 5px 0;
     border: solid 1px $--datepicker-border-color;
     background-color: $--color-white;
@@ -103,8 +103,8 @@
   }
 }
 
-.el-picker-panel *[slot=sidebar],
-.el-picker-panel__sidebar {
+.#{$namespace}-picker-panel *[slot=sidebar],
+.#{$namespace}-picker-panel__sidebar {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -116,7 +116,7 @@
   overflow: auto;
 }
 
-.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
-.el-picker-panel__sidebar + .el-picker-panel__body {
+.#{$namespace}-picker-panel *[slot=sidebar] + .#{$namespace}-picker-panel__body,
+.#{$namespace}-picker-panel__sidebar + .#{$namespace}-picker-panel__body {
   margin-left: 110px;
 }
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 8a152ff59f..b3b213b278 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -17,44 +17,44 @@
   display: inline-block;
   text-align: left;
 
-  &.el-input,
-  &.el-input__inner {
+  &.#{$namespace}-input,
+  &.#{$namespace}-input__inner {
     width: 220px;
   }
 
   @include m((monthrange)) {
-    &.el-input,
-    &.el-input__inner {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
       width: 300px;
     }
   }
 
   @include m((daterange, timerange)) {
-    &.el-input,
-    &.el-input__inner {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
       width: 350px;
     }
   }
 
   @include m(datetimerange) {
-    &.el-input,
-    &.el-input__inner {
+    &.#{$namespace}-input,
+    &.#{$namespace}-input__inner {
       width: 400px;
     }
   }
 
   @include m(dates) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
   }
 
-  .el-icon-circle-close {
+  .#{$namespace}-icon-circle-close {
     cursor: pointer;
   }
 
-  .el-range__icon {
+  .#{$namespace}-range__icon {
     font-size: 14px;
     margin-left: -5px;
     color: $--color-text-placeholder;
@@ -62,7 +62,7 @@
     line-height: 32px;
   }
 
-  .el-range-input {
+  .#{$namespace}-range-input {
     appearance: none;
     border: none;
     outline: none;
@@ -80,7 +80,7 @@
     }
   }
 
-  .el-range-separator {
+  .#{$namespace}-range-separator {
     display: inline-block;
     height: 100%;
     padding: 0 5px;
@@ -92,7 +92,7 @@
     color: $--color-text-primary;
   }
 
-  .el-range__close-icon {
+  .#{$namespace}-range__close-icon {
     font-size: 14px;
     color: $--color-text-placeholder;
     width: 25px;
@@ -103,13 +103,13 @@
 }
 
 @include b(range-editor) {
-  &.el-input__inner {
+  &.#{$namespace}-input__inner {
     display: inline-flex;
     align-items: center;
     padding: 3px 10px;
   }
 
-  .el-range-input {
+  .#{$namespace}-range-input {
     line-height: 1;
   }
 
@@ -124,21 +124,21 @@
   @include m(medium) {
     line-height: $--input-medium-height;
 
-    &.el-input__inner {
+    &.#{$namespace}-input__inner {
       height: $--input-medium-height;
     }
 
-    .el-range-separator {
+    .#{$namespace}-range-separator {
       line-height: 28px;
       font-size: $--input-medium-font-size;
     }
 
-    .el-range-input {
+    .#{$namespace}-range-input {
       font-size: $--input-medium-font-size;
     }
 
-    .el-range__icon,
-    .el-range__close-icon {
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
       line-height: 28px;
     }
   }
@@ -146,21 +146,21 @@
   @include m(small) {
     line-height: $--input-small-height;
 
-    &.el-input__inner {
+    &.#{$namespace}-input__inner {
       height: $--input-small-height;
     }
 
-    .el-range-separator {
+    .#{$namespace}-range-separator {
       line-height: 24px;
       font-size: $--input-small-font-size;
     }
 
-    .el-range-input {
+    .#{$namespace}-range-input {
       font-size: $--input-small-font-size;
     }
 
-    .el-range__icon,
-    .el-range__close-icon {
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
       line-height: 24px;
     }
   }
@@ -168,21 +168,21 @@
   @include m(mini) {
     line-height: $--input-mini-height;
 
-    &.el-input__inner {
+    &.#{$namespace}-input__inner {
       height: $--input-mini-height;
     }
 
-    .el-range-separator {
+    .#{$namespace}-range-separator {
       line-height: 20px;
       font-size: $--input-mini-font-size;
     }
 
-    .el-range-input {
+    .#{$namespace}-range-input {
       font-size: $--input-mini-font-size;
     }
 
-    .el-range__icon,
-    .el-range__close-icon {
+    .#{$namespace}-range__icon,
+    .#{$namespace}-range__close-icon {
       line-height: 20px;
     }
   }
@@ -206,7 +206,7 @@
       }
     }
 
-    .el-range-separator {
+    .#{$namespace}-range-separator {
       color: $--input-disabled-color;
     }
   }
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index c70260a057..4e058eb899 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -2,7 +2,7 @@
 
 @include b(time-spinner) {
   &.has-seconds {
-    .el-time-spinner__wrapper {
+    .#{$namespace}-time-spinner__wrapper {
       width: 33.3%;
     }
   }
@@ -15,7 +15,7 @@
     vertical-align: top;
     position: relative;
 
-    & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+    & .#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
       padding-bottom: 15px;
     }
 
@@ -24,11 +24,11 @@
       text-align: center;
       overflow: hidden;
 
-      .el-time-spinner__list {
+      .#{$namespace}-time-spinner__list {
         transform: translateY(-32px);
       }
 
-      .el-time-spinner__item:hover:not(.disabled):not(.active) {
+      .#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
         background: $--color-white;
         cursor: default;
       }
@@ -51,20 +51,20 @@
       color: $--color-primary;
     }
 
-    &.el-icon-arrow-up {
+    &.#{$namespace}-icon-arrow-up {
       top: 10px;
     }
 
-    &.el-icon-arrow-down {
+    &.#{$namespace}-icon-arrow-down {
       bottom: 10px;
     }
   }
 
   @include e(input) {
-    &.el-input {
+    &.#{$namespace}-input {
       width: 70%;
 
-      .el-input__inner {
+      .#{$namespace}-input__inner {
         padding: 0;
         text-align: center;
       }
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 18fbed921f..56f345e824 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -5,7 +5,7 @@
   margin: -1px;
   border-collapse: collapse;
 
-  .el-icon {
+  .#{$namespace}-icon {
     color: $--datepicker-icon-color;
   }
 
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index 61082d93b4..ee1cdc0946 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -47,13 +47,13 @@
     cursor: pointer;
     font-size: $--message-close-size;
 
-    .el-dialog__close {
+    .#{$namespace}-dialog__close {
       color: $--color-info;
     }
 
     &:focus,
     &:hover {
-      .el-dialog__close {
+      .#{$namespace}-dialog__close {
         color: $--color-primary;
       }
     }
@@ -96,14 +96,14 @@
 
 .dialog-fade-enter-active {
   animation: modal-fade-in 0.3s !important;
-  .el-dialog {
+  .#{$namespace}-dialog {
     animation: dialog-fade-in 0.3s;
   }
 }
 
 .dialog-fade-leave-active {
   animation: modal-fade-out 0.3s;
-  .el-dialog {
+  .#{$namespace}-dialog {
     animation: dialog-fade-out 0.3s;
   }
 }
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 625c6e03ed..567b089be6 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -2,7 +2,7 @@
 @import 'common/var';
 @import './overlay.scss';
 
-@keyframes el-drawer-fade-in {
+@keyframes #{$namespace}-drawer-fade-in {
   0% {
     opacity: 0;
   }
@@ -81,11 +81,11 @@ $directions: rtl, ltr, ttb, btt;
   overflow: hidden;
 
   @each $direction in $directions {
-    .el-drawer-fade-enter-active & {
+    .#{$namespace}-drawer-fade-enter-active & {
       @include animation-in($direction);
     }
 
-    .el-drawer-fade-leave-active & {
+    .#{$namespace}-drawer-fade-leave-active & {
       @include animation-out($direction);
     }
   }
@@ -155,12 +155,12 @@ $directions: rtl, ltr, ttb, btt;
   }
 }
 
-.el-drawer-fade-enter-active {
-  animation: el-drawer-fade-in 0.3s;
+.#{$namespace}-drawer-fade-enter-active {
+  animation: #{$namespace}-drawer-fade-in 0.3s;
   overflow: hidden !important;
 }
 
-.el-drawer-fade-leave-active {
+.#{$namespace}-drawer-fade-leave-active {
   overflow: hidden !important;
-  animation: el-drawer-fade-in 0.3s reverse;
+  animation: #{$namespace}-drawer-fade-in 0.3s reverse;
 }
diff --git a/packages/theme-chalk/src/dropdown.scss b/packages/theme-chalk/src/dropdown.scss
index 8b0ca70b51..6ca2ce0d10 100644
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/packages/theme-chalk/src/dropdown.scss
@@ -18,7 +18,7 @@
       $--dropdown-menu-box-shadow,
     );
 
-    .el-dropdown-menu {
+    .#{$namespace}-dropdown-menu {
       border: none;
     }
 
@@ -27,14 +27,14 @@
     }
   }
 
-  .el-button-group {
+  .#{$namespace}-button-group {
     display: block;
-    .el-button {
+    .#{$namespace}-button {
       float: none;
     }
   }
 
-  & .el-dropdown__caret-button {
+  & .#{$namespace}-dropdown__caret-button {
     padding-left: 5px;
     padding-right: 5px;
     position: relative;
@@ -53,7 +53,7 @@
       background: mix(white, transparent, 50%);
     }
 
-    &.el-button--default::before {
+    &.#{$namespace}-button--default::before {
       background: mix($--button-default-border-color, transparent, 50%);
     }
 
@@ -64,7 +64,7 @@
       }
     }
 
-    & .el-dropdown__icon {
+    & .#{$namespace}-dropdown__icon {
       padding-left: 0;
     }
   }
@@ -73,7 +73,7 @@
     margin: 0 3px;
   }
 
-  .el-dropdown-selfdefine { // 自定义
+  .#{$namespace}-dropdown-selfdefine { // 自定义
     outline: none;
   }
 }
@@ -139,7 +139,7 @@
       padding: 0 17px;
       font-size: 14px;
 
-      &.el-dropdown-menu__item--divided {
+      &.#{$namespace}-dropdown-menu__item--divided {
         $divided-offset: 6px;
         margin-top: $divided-offset;
 
@@ -159,7 +159,7 @@
       padding: 0 15px;
       font-size: 13px;
 
-      &.el-dropdown-menu__item--divided {
+      &.#{$namespace}-dropdown-menu__item--divided {
         $divided-offset: 4px;
         margin-top: $divided-offset;
 
@@ -179,7 +179,7 @@
       padding: 0 10px;
       font-size: 12px;
 
-      &.el-dropdown-menu__item--divided {
+      &.#{$namespace}-dropdown-menu__item--divided {
         $divided-offset: 3px;
         margin-top: $divided-offset;
 
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 2494ca0bed..e5c133384f 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -4,12 +4,12 @@
 
 @include b(form) {
   @include m(label-left) {
-    & .el-form-item__label {
+    & .#{$namespace}-form-item__label {
       text-align: left;
     }
   }
   @include m(label-top) {
-    & .el-form-item__label {
+    & .#{$namespace}-form-item__label {
       float: none;
       display: inline-block;
       text-align: left;
@@ -17,20 +17,20 @@
     }
   }
   @include m(inline) {
-    & .el-form-item {
+    & .#{$namespace}-form-item {
       display: inline-block;
       margin-right: 10px;
       vertical-align: top;
     }
-    & .el-form-item__label {
+    & .#{$namespace}-form-item__label {
       float: none;
       display: inline-block;
     }
-    & .el-form-item__content {
+    & .#{$namespace}-form-item__content {
       display: inline-block;
       vertical-align: top;
     }
-    &.el-form--label-top .el-form-item__content {
+    &.#{$namespace}-form--label-top .#{$namespace}-form-item__content {
       display: block;
     }
   }
@@ -39,54 +39,54 @@
   margin-bottom: 22px;
   @include utils-clearfix;
 
-  & .el-form-item {
+  & .#{$namespace}-form-item {
     margin-bottom: 0;
   }
 
-  & .el-input__validateIcon {
+  & .#{$namespace}-input__validateIcon {
     display: none;
   }
 
   @include m(medium) {
-    .el-form-item__label {
+    .#{$namespace}-form-item__label {
       line-height: 36px;
     }
-    .el-form-item__content {
+    .#{$namespace}-form-item__content {
       line-height: 36px;
     }
   }
   @include m(small) {
-    .el-form-item__label {
+    .#{$namespace}-form-item__label {
       line-height: 32px;
     }
-    .el-form-item__content {
+    .#{$namespace}-form-item__content {
       line-height: 32px;
     }
-    &.el-form-item {
+    &.#{$namespace}-form-item {
       margin-bottom: 18px;
     }
-    .el-form-item__error {
+    .#{$namespace}-form-item__error {
       padding-top: 2px;
     }
   }
   @include m(mini) {
-    .el-form-item__label {
+    .#{$namespace}-form-item__label {
       line-height: 28px;
     }
-    .el-form-item__content {
+    .#{$namespace}-form-item__content {
       line-height: 28px;
     }
-    &.el-form-item {
+    &.#{$namespace}-form-item {
       margin-bottom: 18px;
     }
-    .el-form-item__error {
+    .#{$namespace}-form-item__error {
       padding-top: 1px;
     }
   }
 
   @include e(label-wrap) {
     float: left;
-    .el-form-item__label {
+    .#{$namespace}-form-item__label {
       display: inline-block;
       float: none;
     }
@@ -108,7 +108,7 @@
     font-size: 14px;
     @include utils-clearfix;
 
-    .el-input-group {
+    .#{$namespace}-input-group {
       vertical-align: top;
     }
   }
@@ -132,8 +132,8 @@
 
   @include when(required) {
     @include pseudo('not(.is-no-asterisk)') {
-      & > .el-form-item__label:before,
-      & .el-form-item__label-wrap > .el-form-item__label:before {
+      & > .#{$namespace}-form-item__label:before,
+      & .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
         content: '*';
         color: $--color-danger;
         margin-right: 4px;
@@ -142,25 +142,25 @@
   }
 
   @include when(error) {
-    & .el-input__inner,
-    & .el-textarea__inner {
+    & .#{$namespace}-input__inner,
+    & .#{$namespace}-textarea__inner {
       &, &:focus {
         border-color: $--color-danger;
       }
     }
-    & .el-input-group__append,
-    & .el-input-group__prepend {
-      & .el-input__inner {
+    & .#{$namespace}-input-group__append,
+    & .#{$namespace}-input-group__prepend {
+      & .#{$namespace}-input__inner {
         border-color: transparent;
       }
     }
-    .el-input__validateIcon {
+    .#{$namespace}-input__validateIcon {
       color: $--color-danger;
     }
   }
 
   @include m(feedback) {
-    .el-input__validateIcon {
+    .#{$namespace}-input__validateIcon {
       display: inline-block;
     }
   }
diff --git a/packages/theme-chalk/src/icon.scss b/packages/theme-chalk/src/icon.scss
index 25a4487723..dbd8e68982 100644
--- a/packages/theme-chalk/src/icon.scss
+++ b/packages/theme-chalk/src/icon.scss
@@ -9,7 +9,7 @@
   font-style: normal;
 }
 
-[class^="el-icon-"], [class*=" el-icon-"] {
+[class^="#{$namespace}-icon-"], [class*=" #{$namespace}-icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'element-icons' !important;
   speak: none;
@@ -26,1134 +26,1134 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.el-icon-ice-cream-round:before {
+.#{$namespace}-icon-ice-cream-round:before {
   content: "\e6a0";
 }
 
-.el-icon-ice-cream-square:before {
+.#{$namespace}-icon-ice-cream-square:before {
   content: "\e6a3";
 }
 
-.el-icon-lollipop:before {
+.#{$namespace}-icon-lollipop:before {
   content: "\e6a4";
 }
 
-.el-icon-potato-strips:before {
+.#{$namespace}-icon-potato-strips:before {
   content: "\e6a5";
 }
 
-.el-icon-milk-tea:before {
+.#{$namespace}-icon-milk-tea:before {
   content: "\e6a6";
 }
 
-.el-icon-ice-drink:before {
+.#{$namespace}-icon-ice-drink:before {
   content: "\e6a7";
 }
 
-.el-icon-ice-tea:before {
+.#{$namespace}-icon-ice-tea:before {
   content: "\e6a9";
 }
 
-.el-icon-coffee:before {
+.#{$namespace}-icon-coffee:before {
   content: "\e6aa";
 }
 
-.el-icon-orange:before {
+.#{$namespace}-icon-orange:before {
   content: "\e6ab";
 }
 
-.el-icon-pear:before {
+.#{$namespace}-icon-pear:before {
   content: "\e6ac";
 }
 
-.el-icon-apple:before {
+.#{$namespace}-icon-apple:before {
   content: "\e6ad";
 }
 
-.el-icon-cherry:before {
+.#{$namespace}-icon-cherry:before {
   content: "\e6ae";
 }
 
-.el-icon-watermelon:before {
+.#{$namespace}-icon-watermelon:before {
   content: "\e6af";
 }
 
-.el-icon-grape:before {
+.#{$namespace}-icon-grape:before {
   content: "\e6b0";
 }
 
-.el-icon-refrigerator:before {
+.#{$namespace}-icon-refrigerator:before {
   content: "\e6b1";
 }
 
-.el-icon-goblet-square-full:before {
+.#{$namespace}-icon-goblet-square-full:before {
   content: "\e6b2";
 }
 
-.el-icon-goblet-square:before {
+.#{$namespace}-icon-goblet-square:before {
   content: "\e6b3";
 }
 
-.el-icon-goblet-full:before {
+.#{$namespace}-icon-goblet-full:before {
   content: "\e6b4";
 }
 
-.el-icon-goblet:before {
+.#{$namespace}-icon-goblet:before {
   content: "\e6b5";
 }
 
-.el-icon-cold-drink:before {
+.#{$namespace}-icon-cold-drink:before {
   content: "\e6b6";
 }
 
-.el-icon-coffee-cup:before {
+.#{$namespace}-icon-coffee-cup:before {
   content: "\e6b8";
 }
 
-.el-icon-water-cup:before {
+.#{$namespace}-icon-water-cup:before {
   content: "\e6b9";
 }
 
-.el-icon-hot-water:before {
+.#{$namespace}-icon-hot-water:before {
   content: "\e6ba";
 }
 
-.el-icon-ice-cream:before {
+.#{$namespace}-icon-ice-cream:before {
   content: "\e6bb";
 }
 
-.el-icon-dessert:before {
+.#{$namespace}-icon-dessert:before {
   content: "\e6bc";
 }
 
-.el-icon-sugar:before {
+.#{$namespace}-icon-sugar:before {
   content: "\e6bd";
 }
 
-.el-icon-tableware:before {
+.#{$namespace}-icon-tableware:before {
   content: "\e6be";
 }
 
-.el-icon-burger:before {
+.#{$namespace}-icon-burger:before {
   content: "\e6bf";
 }
 
-.el-icon-knife-fork:before {
+.#{$namespace}-icon-knife-fork:before {
   content: "\e6c1";
 }
 
-.el-icon-fork-spoon:before {
+.#{$namespace}-icon-fork-spoon:before {
   content: "\e6c2";
 }
 
-.el-icon-chicken:before {
+.#{$namespace}-icon-chicken:before {
   content: "\e6c3";
 }
 
-.el-icon-food:before {
+.#{$namespace}-icon-food:before {
   content: "\e6c4";
 }
 
-.el-icon-dish-1:before {
+.#{$namespace}-icon-dish-1:before {
   content: "\e6c5";
 }
 
-.el-icon-dish:before {
+.#{$namespace}-icon-dish:before {
   content: "\e6c6";
 }
 
-.el-icon-moon-night:before {
+.#{$namespace}-icon-moon-night:before {
   content: "\e6ee";
 }
 
-.el-icon-moon:before {
+.#{$namespace}-icon-moon:before {
   content: "\e6f0";
 }
 
-.el-icon-cloudy-and-sunny:before {
+.#{$namespace}-icon-cloudy-and-sunny:before {
   content: "\e6f1";
 }
 
-.el-icon-partly-cloudy:before {
+.#{$namespace}-icon-partly-cloudy:before {
   content: "\e6f2";
 }
 
-.el-icon-cloudy:before {
+.#{$namespace}-icon-cloudy:before {
   content: "\e6f3";
 }
 
-.el-icon-sunny:before {
+.#{$namespace}-icon-sunny:before {
   content: "\e6f6";
 }
 
-.el-icon-sunset:before {
+.#{$namespace}-icon-sunset:before {
   content: "\e6f7";
 }
 
-.el-icon-sunrise-1:before {
+.#{$namespace}-icon-sunrise-1:before {
   content: "\e6f8";
 }
 
-.el-icon-sunrise:before {
+.#{$namespace}-icon-sunrise:before {
   content: "\e6f9";
 }
 
-.el-icon-heavy-rain:before {
+.#{$namespace}-icon-heavy-rain:before {
   content: "\e6fa";
 }
 
-.el-icon-lightning:before {
+.#{$namespace}-icon-lightning:before {
   content: "\e6fb";
 }
 
-.el-icon-light-rain:before {
+.#{$namespace}-icon-light-rain:before {
   content: "\e6fc";
 }
 
-.el-icon-wind-power:before {
+.#{$namespace}-icon-wind-power:before {
   content: "\e6fd";
 }
 
-.el-icon-baseball:before {
+.#{$namespace}-icon-baseball:before {
   content: "\e712";
 }
 
-.el-icon-soccer:before {
+.#{$namespace}-icon-soccer:before {
   content: "\e713";
 }
 
-.el-icon-football:before {
+.#{$namespace}-icon-football:before {
   content: "\e715";
 }
 
-.el-icon-basketball:before {
+.#{$namespace}-icon-basketball:before {
   content: "\e716";
 }
 
-.el-icon-ship:before {
+.#{$namespace}-icon-ship:before {
   content: "\e73f";
 }
 
-.el-icon-truck:before {
+.#{$namespace}-icon-truck:before {
   content: "\e740";
 }
 
-.el-icon-bicycle:before {
+.#{$namespace}-icon-bicycle:before {
   content: "\e741";
 }
 
-.el-icon-mobile-phone:before {
+.#{$namespace}-icon-mobile-phone:before {
   content: "\e6d3";
 }
 
-.el-icon-service:before {
+.#{$namespace}-icon-service:before {
   content: "\e6d4";
 }
 
-.el-icon-key:before {
+.#{$namespace}-icon-key:before {
   content: "\e6e2";
 }
 
-.el-icon-unlock:before {
+.#{$namespace}-icon-unlock:before {
   content: "\e6e4";
 }
 
-.el-icon-lock:before {
+.#{$namespace}-icon-lock:before {
   content: "\e6e5";
 }
 
-.el-icon-watch:before {
+.#{$namespace}-icon-watch:before {
   content: "\e6fe";
 }
 
-.el-icon-watch-1:before {
+.#{$namespace}-icon-watch-1:before {
   content: "\e6ff";
 }
 
-.el-icon-timer:before {
+.#{$namespace}-icon-timer:before {
   content: "\e702";
 }
 
-.el-icon-alarm-clock:before {
+.#{$namespace}-icon-alarm-clock:before {
   content: "\e703";
 }
 
-.el-icon-map-location:before {
+.#{$namespace}-icon-map-location:before {
   content: "\e704";
 }
 
-.el-icon-delete-location:before {
+.#{$namespace}-icon-delete-location:before {
   content: "\e705";
 }
 
-.el-icon-add-location:before {
+.#{$namespace}-icon-add-location:before {
   content: "\e706";
 }
 
-.el-icon-location-information:before {
+.#{$namespace}-icon-location-information:before {
   content: "\e707";
 }
 
-.el-icon-location-outline:before {
+.#{$namespace}-icon-location-outline:before {
   content: "\e708";
 }
 
-.el-icon-location:before {
+.#{$namespace}-icon-location:before {
   content: "\e79e";
 }
 
-.el-icon-place:before {
+.#{$namespace}-icon-place:before {
   content: "\e709";
 }
 
-.el-icon-discover:before {
+.#{$namespace}-icon-discover:before {
   content: "\e70a";
 }
 
-.el-icon-first-aid-kit:before {
+.#{$namespace}-icon-first-aid-kit:before {
   content: "\e70b";
 }
 
-.el-icon-trophy-1:before {
+.#{$namespace}-icon-trophy-1:before {
   content: "\e70c";
 }
 
-.el-icon-trophy:before {
+.#{$namespace}-icon-trophy:before {
   content: "\e70d";
 }
 
-.el-icon-medal:before {
+.#{$namespace}-icon-medal:before {
   content: "\e70e";
 }
 
-.el-icon-medal-1:before {
+.#{$namespace}-icon-medal-1:before {
   content: "\e70f";
 }
 
-.el-icon-stopwatch:before {
+.#{$namespace}-icon-stopwatch:before {
   content: "\e710";
 }
 
-.el-icon-mic:before {
+.#{$namespace}-icon-mic:before {
   content: "\e711";
 }
 
-.el-icon-copy-document:before {
+.#{$namespace}-icon-copy-document:before {
   content: "\e718";
 }
 
-.el-icon-full-screen:before {
+.#{$namespace}-icon-full-screen:before {
   content: "\e719";
 }
 
-.el-icon-switch-button:before {
+.#{$namespace}-icon-switch-button:before {
   content: "\e71b";
 }
 
-.el-icon-aim:before {
+.#{$namespace}-icon-aim:before {
   content: "\e71c";
 }
 
-.el-icon-crop:before {
+.#{$namespace}-icon-crop:before {
   content: "\e71d";
 }
 
-.el-icon-odometer:before {
+.#{$namespace}-icon-odometer:before {
   content: "\e71e";
 }
 
-.el-icon-time:before {
+.#{$namespace}-icon-time:before {
   content: "\e71f";
 }
 
-.el-icon-bangzhu:before {
+.#{$namespace}-icon-bangzhu:before {
   content: "\e724";
 }
 
-.el-icon-close-notification:before {
+.#{$namespace}-icon-close-notification:before {
   content: "\e726";
 }
 
-.el-icon-microphone:before {
+.#{$namespace}-icon-microphone:before {
   content: "\e727";
 }
 
-.el-icon-turn-off-microphone:before {
+.#{$namespace}-icon-turn-off-microphone:before {
   content: "\e728";
 }
 
-.el-icon-position:before {
+.#{$namespace}-icon-position:before {
   content: "\e729";
 }
 
-.el-icon-postcard:before {
+.#{$namespace}-icon-postcard:before {
   content: "\e72a";
 }
 
-.el-icon-message:before {
+.#{$namespace}-icon-message:before {
   content: "\e72b";
 }
 
-.el-icon-chat-line-square:before {
+.#{$namespace}-icon-chat-line-square:before {
   content: "\e72d";
 }
 
-.el-icon-chat-dot-square:before {
+.#{$namespace}-icon-chat-dot-square:before {
   content: "\e72e";
 }
 
-.el-icon-chat-dot-round:before {
+.#{$namespace}-icon-chat-dot-round:before {
   content: "\e72f";
 }
 
-.el-icon-chat-square:before {
+.#{$namespace}-icon-chat-square:before {
   content: "\e730";
 }
 
-.el-icon-chat-line-round:before {
+.#{$namespace}-icon-chat-line-round:before {
   content: "\e731";
 }
 
-.el-icon-chat-round:before {
+.#{$namespace}-icon-chat-round:before {
   content: "\e732";
 }
 
-.el-icon-set-up:before {
+.#{$namespace}-icon-set-up:before {
   content: "\e733";
 }
 
-.el-icon-turn-off:before {
+.#{$namespace}-icon-turn-off:before {
   content: "\e734";
 }
 
-.el-icon-open:before {
+.#{$namespace}-icon-open:before {
   content: "\e735";
 }
 
-.el-icon-connection:before {
+.#{$namespace}-icon-connection:before {
   content: "\e736";
 }
 
-.el-icon-link:before {
+.#{$namespace}-icon-link:before {
   content: "\e737";
 }
 
-.el-icon-cpu:before {
+.#{$namespace}-icon-cpu:before {
   content: "\e738";
 }
 
-.el-icon-thumb:before {
+.#{$namespace}-icon-thumb:before {
   content: "\e739";
 }
 
-.el-icon-female:before {
+.#{$namespace}-icon-female:before {
   content: "\e73a";
 }
 
-.el-icon-male:before {
+.#{$namespace}-icon-male:before {
   content: "\e73b";
 }
 
-.el-icon-guide:before {
+.#{$namespace}-icon-guide:before {
   content: "\e73c";
 }
 
-.el-icon-news:before {
+.#{$namespace}-icon-news:before {
   content: "\e73e";
 }
 
-.el-icon-price-tag:before {
+.#{$namespace}-icon-price-tag:before {
   content: "\e744";
 }
 
-.el-icon-discount:before {
+.#{$namespace}-icon-discount:before {
   content: "\e745";
 }
 
-.el-icon-wallet:before {
+.#{$namespace}-icon-wallet:before {
   content: "\e747";
 }
 
-.el-icon-coin:before {
+.#{$namespace}-icon-coin:before {
   content: "\e748";
 }
 
-.el-icon-money:before {
+.#{$namespace}-icon-money:before {
   content: "\e749";
 }
 
-.el-icon-bank-card:before {
+.#{$namespace}-icon-bank-card:before {
   content: "\e74a";
 }
 
-.el-icon-box:before {
+.#{$namespace}-icon-box:before {
   content: "\e74b";
 }
 
-.el-icon-present:before {
+.#{$namespace}-icon-present:before {
   content: "\e74c";
 }
 
-.el-icon-sell:before {
+.#{$namespace}-icon-sell:before {
   content: "\e6d5";
 }
 
-.el-icon-sold-out:before {
+.#{$namespace}-icon-sold-out:before {
   content: "\e6d6";
 }
 
-.el-icon-shopping-bag-2:before {
+.#{$namespace}-icon-shopping-bag-2:before {
   content: "\e74d";
 }
 
-.el-icon-shopping-bag-1:before {
+.#{$namespace}-icon-shopping-bag-1:before {
   content: "\e74e";
 }
 
-.el-icon-shopping-cart-2:before {
+.#{$namespace}-icon-shopping-cart-2:before {
   content: "\e74f";
 }
 
-.el-icon-shopping-cart-1:before {
+.#{$namespace}-icon-shopping-cart-1:before {
   content: "\e750";
 }
 
-.el-icon-shopping-cart-full:before {
+.#{$namespace}-icon-shopping-cart-full:before {
   content: "\e751";
 }
 
-.el-icon-smoking:before {
+.#{$namespace}-icon-smoking:before {
   content: "\e752";
 }
 
-.el-icon-no-smoking:before {
+.#{$namespace}-icon-no-smoking:before {
   content: "\e753";
 }
 
-.el-icon-house:before {
+.#{$namespace}-icon-house:before {
   content: "\e754";
 }
 
-.el-icon-table-lamp:before {
+.#{$namespace}-icon-table-lamp:before {
   content: "\e755";
 }
 
-.el-icon-school:before {
+.#{$namespace}-icon-school:before {
   content: "\e756";
 }
 
-.el-icon-office-building:before {
+.#{$namespace}-icon-office-building:before {
   content: "\e757";
 }
 
-.el-icon-toilet-paper:before {
+.#{$namespace}-icon-toilet-paper:before {
   content: "\e758";
 }
 
-.el-icon-notebook-2:before {
+.#{$namespace}-icon-notebook-2:before {
   content: "\e759";
 }
 
-.el-icon-notebook-1:before {
+.#{$namespace}-icon-notebook-1:before {
   content: "\e75a";
 }
 
-.el-icon-files:before {
+.#{$namespace}-icon-files:before {
   content: "\e75b";
 }
 
-.el-icon-collection:before {
+.#{$namespace}-icon-collection:before {
   content: "\e75c";
 }
 
-.el-icon-receiving:before {
+.#{$namespace}-icon-receiving:before {
   content: "\e75d";
 }
 
-.el-icon-suitcase-1:before {
+.#{$namespace}-icon-suitcase-1:before {
   content: "\e760";
 }
 
-.el-icon-suitcase:before {
+.#{$namespace}-icon-suitcase:before {
   content: "\e761";
 }
 
-.el-icon-film:before {
+.#{$namespace}-icon-film:before {
   content: "\e763";
 }
 
-.el-icon-collection-tag:before {
+.#{$namespace}-icon-collection-tag:before {
   content: "\e765";
 }
 
-.el-icon-data-analysis:before {
+.#{$namespace}-icon-data-analysis:before {
   content: "\e766";
 }
 
-.el-icon-pie-chart:before {
+.#{$namespace}-icon-pie-chart:before {
   content: "\e767";
 }
 
-.el-icon-data-board:before {
+.#{$namespace}-icon-data-board:before {
   content: "\e768";
 }
 
-.el-icon-data-line:before {
+.#{$namespace}-icon-data-line:before {
   content: "\e76d";
 }
 
-.el-icon-reading:before {
+.#{$namespace}-icon-reading:before {
   content: "\e769";
 }
 
-.el-icon-magic-stick:before {
+.#{$namespace}-icon-magic-stick:before {
   content: "\e76a";
 }
 
-.el-icon-coordinate:before {
+.#{$namespace}-icon-coordinate:before {
   content: "\e76b";
 }
 
-.el-icon-mouse:before {
+.#{$namespace}-icon-mouse:before {
   content: "\e76c";
 }
 
-.el-icon-brush:before {
+.#{$namespace}-icon-brush:before {
   content: "\e76e";
 }
 
-.el-icon-headset:before {
+.#{$namespace}-icon-headset:before {
   content: "\e76f";
 }
 
-.el-icon-umbrella:before {
+.#{$namespace}-icon-umbrella:before {
   content: "\e770";
 }
 
-.el-icon-scissors:before {
+.#{$namespace}-icon-scissors:before {
   content: "\e771";
 }
 
-.el-icon-mobile:before {
+.#{$namespace}-icon-mobile:before {
   content: "\e773";
 }
 
-.el-icon-attract:before {
+.#{$namespace}-icon-attract:before {
   content: "\e774";
 }
 
-.el-icon-monitor:before {
+.#{$namespace}-icon-monitor:before {
   content: "\e775";
 }
 
-.el-icon-search:before {
+.#{$namespace}-icon-search:before {
   content: "\e778";
 }
 
-.el-icon-takeaway-box:before {
+.#{$namespace}-icon-takeaway-box:before {
   content: "\e77a";
 }
 
-.el-icon-paperclip:before {
+.#{$namespace}-icon-paperclip:before {
   content: "\e77d";
 }
 
-.el-icon-printer:before {
+.#{$namespace}-icon-printer:before {
   content: "\e77e";
 }
 
-.el-icon-document-add:before {
+.#{$namespace}-icon-document-add:before {
   content: "\e782";
 }
 
-.el-icon-document:before {
+.#{$namespace}-icon-document:before {
   content: "\e785";
 }
 
-.el-icon-document-checked:before {
+.#{$namespace}-icon-document-checked:before {
   content: "\e786";
 }
 
-.el-icon-document-copy:before {
+.#{$namespace}-icon-document-copy:before {
   content: "\e787";
 }
 
-.el-icon-document-delete:before {
+.#{$namespace}-icon-document-delete:before {
   content: "\e788";
 }
 
-.el-icon-document-remove:before {
+.#{$namespace}-icon-document-remove:before {
   content: "\e789";
 }
 
-.el-icon-tickets:before {
+.#{$namespace}-icon-tickets:before {
   content: "\e78b";
 }
 
-.el-icon-folder-checked:before {
+.#{$namespace}-icon-folder-checked:before {
   content: "\e77f";
 }
 
-.el-icon-folder-delete:before {
+.#{$namespace}-icon-folder-delete:before {
   content: "\e780";
 }
 
-.el-icon-folder-remove:before {
+.#{$namespace}-icon-folder-remove:before {
   content: "\e781";
 }
 
-.el-icon-folder-add:before {
+.#{$namespace}-icon-folder-add:before {
   content: "\e783";
 }
 
-.el-icon-folder-opened:before {
+.#{$namespace}-icon-folder-opened:before {
   content: "\e784";
 }
 
-.el-icon-folder:before {
+.#{$namespace}-icon-folder:before {
   content: "\e78a";
 }
 
-.el-icon-edit-outline:before {
+.#{$namespace}-icon-edit-outline:before {
   content: "\e764";
 }
 
-.el-icon-edit:before {
+.#{$namespace}-icon-edit:before {
   content: "\e78c";
 }
 
-.el-icon-date:before {
+.#{$namespace}-icon-date:before {
   content: "\e78e";
 }
 
-.el-icon-c-scale-to-original:before {
+.#{$namespace}-icon-c-scale-to-original:before {
   content: "\e7c6";
 }
 
-.el-icon-view:before {
+.#{$namespace}-icon-view:before {
   content: "\e6ce";
 }
 
-.el-icon-loading:before {
+.#{$namespace}-icon-loading:before {
   content: "\e6cf";
 }
 
-.el-icon-rank:before {
+.#{$namespace}-icon-rank:before {
   content: "\e6d1";
 }
 
-.el-icon-sort-down:before {
+.#{$namespace}-icon-sort-down:before {
   content: "\e7c4";
 }
 
-.el-icon-sort-up:before {
+.#{$namespace}-icon-sort-up:before {
   content: "\e7c5";
 }
 
-.el-icon-sort:before {
+.#{$namespace}-icon-sort:before {
   content: "\e6d2";
 }
 
-.el-icon-finished:before {
+.#{$namespace}-icon-finished:before {
   content: "\e6cd";
 }
 
-.el-icon-refresh-left:before {
+.#{$namespace}-icon-refresh-left:before {
   content: "\e6c7";
 }
 
-.el-icon-refresh-right:before {
+.#{$namespace}-icon-refresh-right:before {
   content: "\e6c8";
 }
 
-.el-icon-refresh:before {
+.#{$namespace}-icon-refresh:before {
   content: "\e6d0";
 }
 
-.el-icon-video-play:before {
+.#{$namespace}-icon-video-play:before {
   content: "\e7c0";
 }
 
-.el-icon-video-pause:before {
+.#{$namespace}-icon-video-pause:before {
   content: "\e7c1";
 }
 
-.el-icon-d-arrow-right:before {
+.#{$namespace}-icon-d-arrow-right:before {
   content: "\e6dc";
 }
 
-.el-icon-d-arrow-left:before {
+.#{$namespace}-icon-d-arrow-left:before {
   content: "\e6dd";
 }
 
-.el-icon-arrow-up:before {
+.#{$namespace}-icon-arrow-up:before {
   content: "\e6e1";
 }
 
-.el-icon-arrow-down:before {
+.#{$namespace}-icon-arrow-down:before {
   content: "\e6df";
 }
 
-.el-icon-arrow-right:before {
+.#{$namespace}-icon-arrow-right:before {
   content: "\e6e0";
 }
 
-.el-icon-arrow-left:before {
+.#{$namespace}-icon-arrow-left:before {
   content: "\e6de";
 }
 
-.el-icon-top-right:before {
+.#{$namespace}-icon-top-right:before {
   content: "\e6e7";
 }
 
-.el-icon-top-left:before {
+.#{$namespace}-icon-top-left:before {
   content: "\e6e8";
 }
 
-.el-icon-top:before {
+.#{$namespace}-icon-top:before {
   content: "\e6e6";
 }
 
-.el-icon-bottom:before {
+.#{$namespace}-icon-bottom:before {
   content: "\e6eb";
 }
 
-.el-icon-right:before {
+.#{$namespace}-icon-right:before {
   content: "\e6e9";
 }
 
-.el-icon-back:before {
+.#{$namespace}-icon-back:before {
   content: "\e6ea";
 }
 
-.el-icon-bottom-right:before {
+.#{$namespace}-icon-bottom-right:before {
   content: "\e6ec";
 }
 
-.el-icon-bottom-left:before {
+.#{$namespace}-icon-bottom-left:before {
   content: "\e6ed";
 }
 
-.el-icon-caret-top:before {
+.#{$namespace}-icon-caret-top:before {
   content: "\e78f";
 }
 
-.el-icon-caret-bottom:before {
+.#{$namespace}-icon-caret-bottom:before {
   content: "\e790";
 }
 
-.el-icon-caret-right:before {
+.#{$namespace}-icon-caret-right:before {
   content: "\e791";
 }
 
-.el-icon-caret-left:before {
+.#{$namespace}-icon-caret-left:before {
   content: "\e792";
 }
 
-.el-icon-d-caret:before {
+.#{$namespace}-icon-d-caret:before {
   content: "\e79a";
 }
 
-.el-icon-share:before {
+.#{$namespace}-icon-share:before {
   content: "\e793";
 }
 
-.el-icon-menu:before {
+.#{$namespace}-icon-menu:before {
   content: "\e798";
 }
 
-.el-icon-s-grid:before {
+.#{$namespace}-icon-s-grid:before {
   content: "\e7a6";
 }
 
-.el-icon-s-check:before {
+.#{$namespace}-icon-s-check:before {
   content: "\e7a7";
 }
 
-.el-icon-s-data:before {
+.#{$namespace}-icon-s-data:before {
   content: "\e7a8";
 }
 
-.el-icon-s-opportunity:before {
+.#{$namespace}-icon-s-opportunity:before {
   content: "\e7aa";
 }
 
-.el-icon-s-custom:before {
+.#{$namespace}-icon-s-custom:before {
   content: "\e7ab";
 }
 
-.el-icon-s-claim:before {
+.#{$namespace}-icon-s-claim:before {
   content: "\e7ad";
 }
 
-.el-icon-s-finance:before {
+.#{$namespace}-icon-s-finance:before {
   content: "\e7ae";
 }
 
-.el-icon-s-comment:before {
+.#{$namespace}-icon-s-comment:before {
   content: "\e7af";
 }
 
-.el-icon-s-flag:before {
+.#{$namespace}-icon-s-flag:before {
   content: "\e7b0";
 }
 
-.el-icon-s-marketing:before {
+.#{$namespace}-icon-s-marketing:before {
   content: "\e7b1";
 }
 
-.el-icon-s-shop:before {
+.#{$namespace}-icon-s-shop:before {
   content: "\e7b4";
 }
 
-.el-icon-s-open:before {
+.#{$namespace}-icon-s-open:before {
   content: "\e7b5";
 }
 
-.el-icon-s-management:before {
+.#{$namespace}-icon-s-management:before {
   content: "\e7b6";
 }
 
-.el-icon-s-ticket:before {
+.#{$namespace}-icon-s-ticket:before {
   content: "\e7b7";
 }
 
-.el-icon-s-release:before {
+.#{$namespace}-icon-s-release:before {
   content: "\e7b8";
 }
 
-.el-icon-s-home:before {
+.#{$namespace}-icon-s-home:before {
   content: "\e7b9";
 }
 
-.el-icon-s-promotion:before {
+.#{$namespace}-icon-s-promotion:before {
   content: "\e7ba";
 }
 
-.el-icon-s-operation:before {
+.#{$namespace}-icon-s-operation:before {
   content: "\e7bb";
 }
 
-.el-icon-s-unfold:before {
+.#{$namespace}-icon-s-unfold:before {
   content: "\e7bc";
 }
 
-.el-icon-s-fold:before {
+.#{$namespace}-icon-s-fold:before {
   content: "\e7a9";
 }
 
-.el-icon-s-platform:before {
+.#{$namespace}-icon-s-platform:before {
   content: "\e7bd";
 }
 
-.el-icon-s-order:before {
+.#{$namespace}-icon-s-order:before {
   content: "\e7be";
 }
 
-.el-icon-s-cooperation:before {
+.#{$namespace}-icon-s-cooperation:before {
   content: "\e7bf";
 }
 
-.el-icon-bell:before {
+.#{$namespace}-icon-bell:before {
   content: "\e725";
 }
 
-.el-icon-message-solid:before {
+.#{$namespace}-icon-message-solid:before {
   content: "\e799";
 }
 
-.el-icon-video-camera:before {
+.#{$namespace}-icon-video-camera:before {
   content: "\e772";
 }
 
-.el-icon-video-camera-solid:before {
+.#{$namespace}-icon-video-camera-solid:before {
   content: "\e796";
 }
 
-.el-icon-camera:before {
+.#{$namespace}-icon-camera:before {
   content: "\e779";
 }
 
-.el-icon-camera-solid:before {
+.#{$namespace}-icon-camera-solid:before {
   content: "\e79b";
 }
 
-.el-icon-download:before {
+.#{$namespace}-icon-download:before {
   content: "\e77c";
 }
 
-.el-icon-upload2:before {
+.#{$namespace}-icon-upload2:before {
   content: "\e77b";
 }
 
-.el-icon-upload:before {
+.#{$namespace}-icon-upload:before {
   content: "\e7c3";
 }
 
-.el-icon-picture-outline-round:before {
+.#{$namespace}-icon-picture-outline-round:before {
   content: "\e75f";
 }
 
-.el-icon-picture-outline:before {
+.#{$namespace}-icon-picture-outline:before {
   content: "\e75e";
 }
 
-.el-icon-picture:before {
+.#{$namespace}-icon-picture:before {
   content: "\e79f";
 }
 
-.el-icon-close:before {
+.#{$namespace}-icon-close:before {
   content: "\e6db";
 }
 
-.el-icon-check:before {
+.#{$namespace}-icon-check:before {
   content: "\e6da";
 }
 
-.el-icon-plus:before {
+.#{$namespace}-icon-plus:before {
   content: "\e6d9";
 }
 
-.el-icon-minus:before {
+.#{$namespace}-icon-minus:before {
   content: "\e6d8";
 }
 
-.el-icon-help:before {
+.#{$namespace}-icon-help:before {
   content: "\e73d";
 }
 
-.el-icon-s-help:before {
+.#{$namespace}-icon-s-help:before {
   content: "\e7b3";
 }
 
-.el-icon-circle-close:before {
+.#{$namespace}-icon-circle-close:before {
   content: "\e78d";
 }
 
-.el-icon-circle-check:before {
+.#{$namespace}-icon-circle-check:before {
   content: "\e720";
 }
 
-.el-icon-circle-plus-outline:before {
+.#{$namespace}-icon-circle-plus-outline:before {
   content: "\e723";
 }
 
-.el-icon-remove-outline:before {
+.#{$namespace}-icon-remove-outline:before {
   content: "\e722";
 }
 
-.el-icon-zoom-out:before {
+.#{$namespace}-icon-zoom-out:before {
   content: "\e776";
 }
 
-.el-icon-zoom-in:before {
+.#{$namespace}-icon-zoom-in:before {
   content: "\e777";
 }
 
-.el-icon-error:before {
+.#{$namespace}-icon-error:before {
   content: "\e79d";
 }
 
-.el-icon-success:before {
+.#{$namespace}-icon-success:before {
   content: "\e79c";
 }
 
-.el-icon-circle-plus:before {
+.#{$namespace}-icon-circle-plus:before {
   content: "\e7a0";
 }
 
-.el-icon-remove:before {
+.#{$namespace}-icon-remove:before {
   content: "\e7a2";
 }
 
-.el-icon-info:before {
+.#{$namespace}-icon-info:before {
   content: "\e7a1";
 }
 
-.el-icon-question:before {
+.#{$namespace}-icon-question:before {
   content: "\e7a4";
 }
 
-.el-icon-warning-outline:before {
+.#{$namespace}-icon-warning-outline:before {
   content: "\e6c9";
 }
 
-.el-icon-warning:before {
+.#{$namespace}-icon-warning:before {
   content: "\e7a3";
 }
 
-.el-icon-goods:before {
+.#{$namespace}-icon-goods:before {
   content: "\e7c2";
 }
 
-.el-icon-s-goods:before {
+.#{$namespace}-icon-s-goods:before {
   content: "\e7b2";
 }
 
-.el-icon-star-off:before {
+.#{$namespace}-icon-star-off:before {
   content: "\e717";
 }
 
-.el-icon-star-on:before {
+.#{$namespace}-icon-star-on:before {
   content: "\e797";
 }
 
-.el-icon-more-outline:before {
+.#{$namespace}-icon-more-outline:before {
   content: "\e6cc";
 }
 
-.el-icon-more:before {
+.#{$namespace}-icon-more:before {
   content: "\e794";
 }
 
-.el-icon-phone-outline:before {
+.#{$namespace}-icon-phone-outline:before {
   content: "\e6cb";
 }
 
-.el-icon-phone:before {
+.#{$namespace}-icon-phone:before {
   content: "\e795";
 }
 
-.el-icon-user:before {
+.#{$namespace}-icon-user:before {
   content: "\e6e3";
 }
 
-.el-icon-user-solid:before {
+.#{$namespace}-icon-user-solid:before {
   content: "\e7a5";
 }
 
-.el-icon-setting:before {
+.#{$namespace}-icon-setting:before {
   content: "\e6ca";
 }
 
-.el-icon-s-tools:before {
+.#{$namespace}-icon-s-tools:before {
   content: "\e7ac";
 }
 
-.el-icon-delete:before {
+.#{$namespace}-icon-delete:before {
   content: "\e6d7";
 }
 
-.el-icon-delete-solid:before {
+.#{$namespace}-icon-delete-solid:before {
   content: "\e7c9";
 }
 
-.el-icon-eleme:before {
+.#{$namespace}-icon-eleme:before {
   content: "\e7c7";
 }
 
-.el-icon-platform-eleme:before {
+.#{$namespace}-icon-platform-eleme:before {
   content: "\e7ca";
 }
 
-.el-icon-loading {
+.#{$namespace}-icon-loading {
   animation: rotating 2s linear infinite;
 }
 
-.el-icon--right {
+.#{$namespace}-icon--right {
   margin-left: 5px;
 }
-.el-icon--left {
+.#{$namespace}-icon--left {
   margin-right: 5px;
 }
 
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 4e5109cb8c..ad6d63bd14 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -8,7 +8,7 @@
   width: 180px;
   line-height: #{$--input-height - 2};
 
-  .el-input {
+  .#{$namespace}-input {
     display: block;
 
     &__inner {
@@ -34,7 +34,7 @@
     &:hover {
       color: $--color-primary;
 
-      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+      &:not(.is-disabled) ~ .#{$namespace}-input .#{$namespace}-input__inner:not(.is-disabled) {
         border-color: $--input-focus-border;
       }
     }
@@ -78,7 +78,7 @@
       font-size: $--input-medium-font-size;
     }
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: #{$--input-medium-height + 7};
       padding-right: #{$--input-medium-height + 7};
     }
@@ -92,12 +92,12 @@
       width: $--input-small-height;
       font-size: $--input-small-font-size;
 
-      [class*=el-icon] {
+      [class*=#{$namespace}-icon] {
         transform: scale(.9);
       }
     }
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: #{$--input-small-height + 7};
       padding-right: #{$--input-small-height + 7};
     }
@@ -111,26 +111,26 @@
       width: $--input-mini-height;
       font-size: $--input-mini-font-size;
 
-      [class*=el-icon] {
+      [class*=#{$namespace}-icon] {
         transform: scale(.8);
       }
     }
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: #{$--input-mini-height + 7};
       padding-right: #{$--input-mini-height + 7};
     }
   }
 
   @include when(without-controls) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: 15px;
       padding-right: 15px;
     }
   }
 
   @include when(controls-right) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: 15px;
       padding-right: #{$--input-height + 10};
     }
@@ -139,7 +139,7 @@
       height: auto;
       line-height: #{($--input-height - 2) / 2};
 
-      [class*=el-icon] {
+      [class*=#{$namespace}-icon] {
         transform: scale(.8);
       }
     }
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 004b05cbdb..8aa9757bf6 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -37,7 +37,7 @@
     }
   }
 
-  & .el-input__count {
+  & .#{$namespace}-input__count {
     color: $--color-info;
     background: $--color-white;
     position: absolute;
@@ -48,7 +48,7 @@
   }
 
   @include when(disabled) {
-    .el-textarea__inner {
+    .#{$namespace}-textarea__inner {
       background-color: $--input-disabled-fill;
       border-color: $--input-disabled-border;
       color: $--input-disabled-color;
@@ -61,11 +61,11 @@
   }
 
   @include when(exceed) {
-    .el-textarea__inner {
+    .#{$namespace}-textarea__inner {
       border-color: $--color-danger;
     }
 
-    .el-input__count {
+    .#{$namespace}-input__count {
       color: $--color-danger;
     }
   }
@@ -79,7 +79,7 @@
   line-height: $--input-height;
   @include scroll-bar;
 
-  & .el-input__clear {
+  & .#{$namespace}-input__clear {
     color: $--input-icon-color;
     font-size: $--input-font-size;
     cursor: pointer;
@@ -90,14 +90,14 @@
     }
   }
 
-  & .el-input__count {
+  & .#{$namespace}-input__count {
     height: 100%;
     display: inline-flex;
     align-items: center;
     color: $--color-info;
     font-size: 12px;
 
-    .el-input__count-inner {
+    .#{$namespace}-input__count-inner {
       background: $--color-white;
       line-height: initial;
       display: inline-block;
@@ -182,14 +182,14 @@
   }
 
   @include when(active) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       outline: none;
       border-color: $--input-focus-border;
     }
   }
 
   @include when(disabled) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       background-color: $--input-disabled-fill;
       border-color: $--input-disabled-border;
       color: $--input-disabled-color;
@@ -200,31 +200,31 @@
       }
     }
 
-    .el-input__icon {
+    .#{$namespace}-input__icon {
       cursor: not-allowed;
     }
   }
 
   @include when(exceed) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       border-color: $--color-danger;
     }
 
-    .el-input__suffix {
-      .el-input__count {
+    .#{$namespace}-input__suffix {
+      .#{$namespace}-input__count {
         color: $--color-danger;
       }
     }
   }
 
   @include m(suffix) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-right: 30px;
     }
   }
 
   @include m(prefix) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-left: 30px;
     }
   }
@@ -237,7 +237,7 @@
       height: $--input-medium-height;
     }
 
-    .el-input__icon {
+    .#{$namespace}-input__icon {
       line-height: $--input-medium-height;
     }
   }
@@ -249,7 +249,7 @@
       height: $--input-small-height;
     }
 
-    .el-input__icon {
+    .#{$namespace}-input__icon {
       line-height: $--input-small-height;
     }
   }
@@ -261,7 +261,7 @@
       height: $--input-mini-height;
     }
 
-    .el-input__icon {
+    .#{$namespace}-input__icon {
       line-height: $--input-mini-height;
     }
   }
@@ -274,7 +274,7 @@
   border-collapse: separate;
   border-spacing:0;
 
-  > .el-input__inner {
+  > .#{$namespace}-input__inner {
     vertical-align: middle;
     display: table-cell;
   }
@@ -295,15 +295,15 @@
       outline: none;
     }
 
-    .el-select,
-    .el-button {
+    .#{$namespace}-select,
+    .#{$namespace}-button {
       display: inline-block;
       margin: -10px -20px;
     }
 
-    button.el-button,
-    div.el-select .el-input__inner,
-    div.el-select:hover .el-input__inner {
+    button.#{$namespace}-button,
+    div.#{$namespace}-select .#{$namespace}-input__inner,
+    div.#{$namespace}-select:hover .#{$namespace}-input__inner {
       border-color: transparent;
       background-color: transparent;
       color: inherit;
@@ -311,8 +311,8 @@
       border-bottom: 0;
     }
 
-    .el-button,
-    .el-input {
+    .#{$namespace}-button,
+    .#{$namespace}-input {
       font-size: inherit;
     }
   }
@@ -330,28 +330,28 @@
   }
 
   @include m(prepend) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    .el-select .el-input.is-focus .el-input__inner {
+    .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
       border-color: transparent;
     }
   }
 
   @include m(append) {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
-    .el-select .el-input.is-focus .el-input__inner {
+    .#{$namespace}-select .#{$namespace}-input.is-focus .#{$namespace}-input__inner {
       border-color: transparent;
     }
   }
 }
 
 /** disalbe default clear on IE */
-.el-input__inner::-ms-clear {
+.#{$namespace}-input__inner::-ms-clear {
   display: none;
   width: 0;
   height: 0;
diff --git a/packages/theme-chalk/src/link.scss b/packages/theme-chalk/src/link.scss
index 704379f0b3..e17348fdb8 100644
--- a/packages/theme-chalk/src/link.scss
+++ b/packages/theme-chalk/src/link.scss
@@ -38,14 +38,14 @@ $typeMap: (
     cursor: not-allowed;
   } 
 
-  & [class*="el-icon-"] {
+  & [class*="#{$namespace}-icon-"] {
     & + span {
       margin-left: 5px;
     }
   }
     
     
-  &.el-link--default  {
+  &.#{$namespace}-link--default  {
     color: $--link-default-font-color;
     &:hover {
       color: $--link-default-active-color
@@ -59,7 +59,7 @@ $typeMap: (
   }
 
   @each $type, $primaryColor in $typeMap {
-    &.el-link--#{$type} {
+    &.#{$namespace}-link--#{$type} {
       color: $primaryColor;
       &:hover {
         color: mix($primaryColor, $--color-white, 80%)
diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss
index c1799aa323..9dd1d5bb07 100644
--- a/packages/theme-chalk/src/loading.scss
+++ b/packages/theme-chalk/src/loading.scss
@@ -25,7 +25,7 @@
   @include when(fullscreen) {
     position: fixed;
 
-    .el-loading-spinner {
+    .#{$namespace}-loading-spinner {
       margin-top: #{- $--loading-fullscreen-spinner-size / 2};
 
       .circular {
@@ -43,7 +43,7 @@
   text-align: center;
   position: absolute;
 
-  .el-loading-text {
+  .#{$namespace}-loading-text {
     color: $--color-primary;
     margin: 3px 0;
     font-size: 14px;
@@ -69,8 +69,8 @@
   }
 }
 
-.el-loading-fade-enter-from,
-.el-loading-fade-leave-to {
+.#{$namespace}-loading-fade-enter-from,
+.#{$namespace}-loading-fade-leave-to {
   opacity: 0;
 }
 
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index 39a1441cba..9fa8419fed 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -45,13 +45,13 @@
   padding-left: 0;
   background-color: $--menu-background-color;
   @include utils-clearfix;
-  &.el-menu--horizontal {
+  &.#{$namespace}-menu--horizontal {
     border-bottom: solid 1px #e6e6e6;
   }
 
   @include m(horizontal) {
     border-right: none;
-    & > .el-menu-item {
+    & > .#{$namespace}-menu-item {
       float: left;
       height: 60px;
       line-height: 60px;
@@ -69,25 +69,25 @@
         background-color: #fff;
       }
     }
-    & > .el-submenu {
+    & > .#{$namespace}-submenu {
       float: left;
 
       &:focus,
       &:hover {
         outline: none;
-        .el-submenu__title {
+        .#{$namespace}-submenu__title {
           color: $--color-text-primary;
         }
       }
 
       &.is-active {
-        .el-submenu__title {
+        .#{$namespace}-submenu__title {
           border-bottom: 2px solid $--color-primary;
           color: $--color-text-primary;
         }
       }
 
-      & .el-submenu__title {
+      & .#{$namespace}-submenu__title {
         height: 60px;
         line-height: 60px;
         border-bottom: 2px solid transparent;
@@ -97,16 +97,16 @@
           background-color: #fff;
         }
       }
-      & .el-submenu__icon-arrow {
+      & .#{$namespace}-submenu__icon-arrow {
         position: static;
         vertical-align: middle;
         margin-left: 8px;
         margin-top: -3px;
       }
     }
-    & .el-menu {
-      & .el-menu-item,
-      & .el-submenu__title {
+    & .#{$namespace}-menu {
+      & .#{$namespace}-menu-item,
+      & .#{$namespace}-submenu__title {
         background-color: $--color-white;
         float: none;
         height: 36px;
@@ -114,17 +114,17 @@
         padding: 0 10px;
         color: $--color-text-secondary;
       }
-      & .el-menu-item.is-active,
-      & .el-submenu.is-active > .el-submenu__title {
+      & .#{$namespace}-menu-item.is-active,
+      & .#{$namespace}-submenu.is-active > .#{$namespace}-submenu__title {
         color: $--color-text-primary;
       }
     }
-    & .el-menu-item:not(.is-disabled):hover,
-    & .el-menu-item:not(.is-disabled):focus {
+    & .#{$namespace}-menu-item:not(.is-disabled):hover,
+    & .#{$namespace}-menu-item:not(.is-disabled):focus {
       outline: none;
       color: $--color-text-primary;
     }
-    & > .el-menu-item.is-active {
+    & > .#{$namespace}-menu-item.is-active {
       border-bottom: 2px solid $--color-primary;
       color: $--color-text-primary;
     }
@@ -132,15 +132,15 @@
   @include m(collapse) {
     width: 64px;
 
-    > .el-menu-item,
-    > .el-submenu > .el-submenu__title {
-      [class^='el-icon-'] {
+    > .#{$namespace}-menu-item,
+    > .#{$namespace}-submenu > .#{$namespace}-submenu__title {
+      [class^='#{$namespace}-icon-'] {
         margin: 0;
         vertical-align: middle;
         width: 24px;
         text-align: center;
       }
-      .el-submenu__icon-arrow {
+      .#{$namespace}-submenu__icon-arrow {
         display: none;
       }
       span {
@@ -152,17 +152,17 @@
       }
     }
 
-    > .el-menu-item.is-active i {
+    > .#{$namespace}-menu-item.is-active i {
       color: inherit;
     }
 
-    .el-menu .el-submenu {
+    .#{$namespace}-menu .#{$namespace}-submenu {
       min-width: 200px;
     }
 
-    .el-submenu {
+    .#{$namespace}-submenu {
       position: relative;
-      & .el-menu {
+      & .#{$namespace}-menu {
         position: absolute;
         margin-left: 5px;
         top: 0;
@@ -174,7 +174,7 @@
       }
 
       &.is-opened {
-        > .el-submenu__title .el-submenu__icon-arrow {
+        > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
           transform: none;
         }
       }
@@ -192,7 +192,7 @@
 @include b(menu-item) {
   @include menu-item;
 
-  & [class^='el-icon-'] {
+  & [class^='#{$namespace}-icon-'] {
     margin-right: 5px;
     width: 24px;
     text-align: center;
@@ -219,10 +219,10 @@
       background-color: $--menu-item-hover-fill;
     }
   }
-  & .el-menu {
+  & .#{$namespace}-menu {
     border: none;
   }
-  & .el-menu-item {
+  & .#{$namespace}-menu-item {
     height: 50px;
     line-height: 50px;
     padding: 0 45px;
@@ -237,24 +237,24 @@
     font-size: 12px;
   }
   @include when(active) {
-    .el-submenu__title {
+    .#{$namespace}-submenu__title {
       border-bottom-color: $--color-primary;
     }
   }
   @include when(opened) {
-    > .el-submenu__title .el-submenu__icon-arrow {
+    > .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
       transform: rotateZ(180deg);
     }
   }
   @include when(disabled) {
-    .el-submenu__title,
-    .el-menu-item {
+    .#{$namespace}-submenu__title,
+    .#{$namespace}-menu-item {
       opacity: 0.25;
       cursor: not-allowed;
       background: none !important;
     }
   }
-  [class^='el-icon-'] {
+  [class^='#{$namespace}-icon-'] {
     vertical-align: middle;
     margin-right: 5px;
     width: 24px;
@@ -275,7 +275,7 @@
   }
 }
 
-.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+.horizontal-collapse-transition .#{$namespace}-submenu__title .#{$namespace}-submenu__icon-arrow {
   transition: 0.2s;
   opacity: 0;
 }
diff --git a/packages/theme-chalk/src/message-box.scss b/packages/theme-chalk/src/message-box.scss
index 824ce6c95f..d1b18b021a 100644
--- a/packages/theme-chalk/src/message-box.scss
+++ b/packages/theme-chalk/src/message-box.scss
@@ -18,7 +18,7 @@
   overflow: hidden;
   backface-visibility: hidden;
 
-  @at-root .el-overlay.is-message-box {
+  @at-root .#{$namespace}-overlay.is-message-box {
     text-align: center;
     &::after {
       content: '';
@@ -55,13 +55,13 @@
     font-size: $--message-close-size;
     cursor: pointer;
 
-    .el-message-box__close {
+    .#{$namespace}-message-box__close {
       color: $--color-info;
     }
 
     &:focus,
     &:hover {
-      .el-message-box__close {
+      .#{$namespace}-message-box__close {
         color: $--color-primary;
       }
     }
@@ -99,24 +99,24 @@
       padding-left: 1px;
     }
 
-    + .el-message-box__message {
+    + .#{$namespace}-message-box__message {
       padding-left: 36px;
       padding-right: 12px;
     }
 
-    &.el-icon-success {
+    &.#{$namespace}-icon-success {
       color: $--messagebox-success-color;
     }
 
-    &.el-icon-info {
+    &.#{$namespace}-icon-info {
       color: $--messagebox-info-color;
     }
 
-    &.el-icon-warning {
+    &.#{$namespace}-icon-warning {
       color: $--messagebox-warning-color;
     }
 
-    &.el-icon-error {
+    &.#{$namespace}-icon-error {
       color: $--messagebox-danger-color;
     }
   }
@@ -191,13 +191,13 @@
 }
 
 .fade-in-linear-enter-active {
-  .el-message-box {
+  .#{$namespace}-message-box {
     animation: msgbox-fade-in 0.3s;
   }
 }
 
 .fade-in-linear-leave-active {
-  .el-message-box {
+  .#{$namespace}-message-box {
     animation: msgbox-fade-in 0.3s reverse;
   }
 }
diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index bbd64b441a..e3f78e05df 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -24,7 +24,7 @@
   }
 
   @include when(closable) {
-    .el-message__content {
+    .#{$namespace}-message__content {
       padding-right: 16px;
     }
   }
@@ -34,7 +34,7 @@
   }
 
   @include m(info) {
-    .el-message__content {
+    .#{$namespace}-message__content {
       color: $--message-info-font-color;
     }
   }
@@ -43,7 +43,7 @@
     background-color: $--color-success-lighter;
     border-color: $--color-success-light;
 
-    .el-message__content {
+    .#{$namespace}-message__content {
       color: $--message-success-font-color;
     }
   }
@@ -52,7 +52,7 @@
     background-color: $--color-warning-lighter;
     border-color: $--color-warning-light;
 
-    .el-message__content {
+    .#{$namespace}-message__content {
       color: $--message-warning-font-color;
     }
   }
@@ -61,7 +61,7 @@
     background-color: $--color-danger-lighter;
     border-color: $--color-danger-light;
 
-    .el-message__content {
+    .#{$namespace}-message__content {
       color: $--message-danger-font-color;
     }
   }
@@ -96,25 +96,25 @@
     }
   }
 
-  & .el-icon-success {
+  & .#{$namespace}-icon-success {
     color: $--message-success-font-color;
   }
 
-  & .el-icon-error {
+  & .#{$namespace}-icon-error {
     color: $--message-danger-font-color;
   }
 
-  & .el-icon-info {
+  & .#{$namespace}-icon-info {
     color: $--message-info-font-color;
   }
 
-  & .el-icon-warning {
+  & .#{$namespace}-icon-warning {
     color: $--message-warning-font-color;
   }
 }
 
-.el-message-fade-enter-from,
-.el-message-fade-leave-to {
+.#{$namespace}-message-fade-enter-from,
+.#{$namespace}-message-fade-leave-to {
   opacity: 0;
   transform: translate(-50%, -100%);
 }
diff --git a/packages/theme-chalk/src/mixins/mixins.scss b/packages/theme-chalk/src/mixins/mixins.scss
index e22cc0c29b..353759c4fb 100644
--- a/packages/theme-chalk/src/mixins/mixins.scss
+++ b/packages/theme-chalk/src/mixins/mixins.scss
@@ -189,12 +189,12 @@
 }
 
 @mixin picker-popper($background, $border, $box-shadow) {
-  &.el-popper[role="tooltip"] {
+  &.#{$namespace}-popper[role="tooltip"] {
     background: $background;
     border: $border;
     box-shadow: $box-shadow;
 
-    .el-popper__arrow {
+    .#{$namespace}-popper__arrow {
       &::before {
         border: $border;
       }
@@ -205,7 +205,7 @@
       in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
     {
       &[data-popper-placement^='#{$placement}'] {
-        .el-popper__arrow::before {
+        .#{$namespace}-popper__arrow::before {
           border-#{$placement}-color: transparent;
           border-#{$adjacency}-color: transparent;
         }
diff --git a/packages/theme-chalk/src/notification.scss b/packages/theme-chalk/src/notification.scss
index 9afe9d347a..c3bea62947 100644
--- a/packages/theme-chalk/src/notification.scss
+++ b/packages/theme-chalk/src/notification.scss
@@ -66,24 +66,24 @@
     }
   }
 
-  .el-icon-success {
+  .#{$namespace}-icon-success {
     color: $--notification-success-icon-color;
   }
 
-  .el-icon-error {
+  .#{$namespace}-icon-error {
     color: $--notification-danger-icon-color;
   }
 
-  .el-icon-info {
+  .#{$namespace}-icon-info {
     color: $--notification-info-icon-color;
   }
 
-  .el-icon-warning {
+  .#{$namespace}-icon-warning {
     color: $--notification-warning-icon-color;
   }
 }
 
-.el-notification-fade-enter-from {
+.#{$namespace}-notification-fade-enter-from {
   &.right {
     right: 0;
     transform: translateX(100%);
@@ -95,6 +95,6 @@
   }
 }
 
-.el-notification-fade-leave-to {
+.#{$namespace}-notification-fade-leave-to {
   opacity: 0;
 }
diff --git a/packages/theme-chalk/src/option-group.scss b/packages/theme-chalk/src/option-group.scss
index c68addb9ea..d989caee51 100644
--- a/packages/theme-chalk/src/option-group.scss
+++ b/packages/theme-chalk/src/option-group.scss
@@ -36,7 +36,7 @@
     line-height: $--select-group-height;
   }
 
-  & .el-select-dropdown__item {
+  & .#{$namespace}-select-dropdown__item {
     padding-left: $gap;
   }
 }
diff --git a/packages/theme-chalk/src/page-header.scss b/packages/theme-chalk/src/page-header.scss
index 14c19fa9d8..c564196c86 100644
--- a/packages/theme-chalk/src/page-header.scss
+++ b/packages/theme-chalk/src/page-header.scss
@@ -22,7 +22,7 @@
       background-color: $--border-color-base;
     }
 
-    .el-icon-back {
+    .#{$namespace}-icon-back {
       font-size: 18px;
       margin-right: 6px;
       align-self: center;
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 02384e6774..31ff1ffca6 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -21,23 +21,23 @@
     box-sizing: border-box;
   }
 
-  .el-input__inner {
+  .#{$namespace}-input__inner {
     text-align: center;
     -moz-appearance: textfield;
     line-height: normal;
   }
 
   // pagesize 的下拉 icon
-  .el-input__suffix {
+  .#{$namespace}-input__suffix {
     right: 0;
     transform: scale(.8);
   }
 
-  .el-select .el-input {
+  .#{$namespace}-select .#{$namespace}-input {
     width: 100px;
     margin: 0 5px;
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding-right: 25px;
       border-radius: $--pagination-border-radius;
     }
@@ -72,7 +72,7 @@
     margin: 0;
     color: $--pagination-button-color;
 
-    .el-icon {
+    .#{$namespace}-icon {
       display: block;
       font-size: 12px;
       font-weight: bold;
@@ -87,7 +87,7 @@
     padding-left: 12px;    
   }
 
-  .el-pager li.disabled {
+  .#{$namespace}-pager li.disabled {
     color: $--color-text-placeholder;
     cursor: not-allowed;
   }
@@ -95,10 +95,10 @@
   @include m(small) {
     .btn-prev,
     .btn-next,
-    .el-pager li,
-    .el-pager li.btn-quicknext,
-    .el-pager li.btn-quickprev,
-    .el-pager li:last-child {
+    .#{$namespace}-pager li,
+    .#{$namespace}-pager li.btn-quicknext,
+    .#{$namespace}-pager li.btn-quickprev,
+    .#{$namespace}-pager li:last-child {
       border-color: transparent;
       font-size: 12px;
       line-height: 22px;
@@ -123,7 +123,7 @@
 
     @include e(editor) {
       height: 22px;
-      &.el-input .el-input__inner {
+      &.#{$namespace}-input .#{$namespace}-input__inner {
         height: 22px;
       }
     }
@@ -134,7 +134,7 @@
     font-weight: normal;
     color: $--color-text-regular;
 
-    .el-input .el-input__inner {
+    .#{$namespace}-input .#{$namespace}-input__inner {
       font-size: $--pagination-font-size;
       padding-left: 8px;
 
@@ -155,7 +155,7 @@
     font-weight: normal;
     color: $--color-text-regular;
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       padding: 0 3px;
     }
   }
@@ -174,16 +174,16 @@
     box-sizing: border-box;
     border-radius: $--pagination-border-radius;
 
-    &.el-input {
+    &.#{$namespace}-input {
       width: 50px;
     }
 
-    &.el-input .el-input__inner {
+    &.#{$namespace}-input .#{$namespace}-input__inner {
       height: $--pagination-button-height;
     }
 
-    .el-input__inner::-webkit-inner-spin-button,
-    .el-input__inner::-webkit-outer-spin-button {
+    .#{$namespace}-input__inner::-webkit-inner-spin-button,
+    .#{$namespace}-input__inner::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
@@ -192,7 +192,7 @@
   @include when(background) {
     .btn-prev,
     .btn-next,
-    .el-pager li {
+    .#{$namespace}-pager li {
       margin: 0 5px;
       background-color: $--color-info-lighter;
       color: $--color-text-regular;
@@ -212,7 +212,7 @@
       }
     }
 
-    .el-pager li:not(.disabled) {
+    .#{$namespace}-pager li:not(.disabled) {
       &:hover {
         color: $--pagination-hover-color;
       }
@@ -223,10 +223,10 @@
       }
     }
 
-    &.el-pagination--small {
+    &.#{$namespace}-pagination--small {
       .btn-prev,
       .btn-next,
-      .el-pager li {
+      .#{$namespace}-pager li {
         margin: 0 3px;
         min-width: 22px;
       }
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index 4f2b35d879..0b8b8b079e 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -2,7 +2,7 @@
 @import 'common/var';
 
 @include b(popover) {
-  &.el-popper {
+  &.#{$namespace}-popper {
     background: $--popover-background-color;
     min-width: 150px;
     border-radius: 4px;
diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
index e6139f59dc..e93fde80a9 100644
--- a/packages/theme-chalk/src/progress.scss
+++ b/packages/theme-chalk/src/progress.scss
@@ -23,7 +23,7 @@
   @include m((circle,dashboard)) {
     display: inline-block;
 
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       position: absolute;
       top: 50%;
       left: 0;
@@ -41,11 +41,11 @@
 
 
   @include m(without-text) {
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       display: none;
     }
 
-    .el-progress-bar {
+    .#{$namespace}-progress-bar {
       padding-right: 0;
       margin-right: 0;
       display: block;
@@ -53,38 +53,38 @@
   }
 
   @include m(text-inside) {
-    .el-progress-bar {
+    .#{$namespace}-progress-bar {
       padding-right: 0;
       margin-right: 0;
     }
   }
 
   @include when(success) {
-    .el-progress-bar__inner {
+    .#{$namespace}-progress-bar__inner {
       background-color: $--color-success;
     }
 
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       color: $--color-success;
     }
   }
 
   @include when(warning) {
-    .el-progress-bar__inner {
+    .#{$namespace}-progress-bar__inner {
       background-color: $--color-warning;
     }
 
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       color: $--color-warning;
     }
   }
 
   @include when(exception) {
-    .el-progress-bar__inner {
+    .#{$namespace}-progress-bar__inner {
       background-color: $--color-danger;
     }
 
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       color: $--color-danger;
     }
   }
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index bd4215eea0..4a12160835 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -32,7 +32,7 @@
       color: $--color-primary;
     }
 
-    & [class*="el-icon-"] {
+    & [class*="#{$namespace}-icon-"] {
       line-height: 0.9;
 
       & + span {
@@ -42,7 +42,7 @@
   }
 
   &:first-child {
-    .el-radio-button__inner {
+    .#{$namespace}-radio-button__inner {
       border-left: $--border-base;
       border-radius: $--border-radius-base 0 0 $--border-radius-base;
       box-shadow: none !important;
@@ -56,7 +56,7 @@
     z-index: -1;
 
     &:checked {
-      & + .el-radio-button__inner {
+      & + .#{$namespace}-radio-button__inner {
         color: $--radio-button-checked-font-color;
         background-color: $--radio-button-checked-background-color;
         border-color: $--radio-button-checked-border-color;
@@ -65,7 +65,7 @@
     }
 
     &:disabled {
-      & + .el-radio-button__inner {
+      & + .#{$namespace}-radio-button__inner {
         color: $--button-disabled-font-color;
         cursor: not-allowed;
         background-image: none;
@@ -73,36 +73,36 @@
         border-color: $--button-disabled-border-color;
         box-shadow: none;
       }
-      &:checked + .el-radio-button__inner {
+      &:checked + .#{$namespace}-radio-button__inner {
         background-color: $--radio-button-disabled-checked-fill;
       }
     }
   }
 
   &:last-child {
-    .el-radio-button__inner {
+    .#{$namespace}-radio-button__inner {
       border-radius: 0 $--border-radius-base $--border-radius-base 0;
     }
   }
 
   &:first-child:last-child {
-    .el-radio-button__inner {
+    .#{$namespace}-radio-button__inner {
       border-radius: $--border-radius-base;
     }
   }
 
   @include m(medium) {
-    & .el-radio-button__inner {
+    & .#{$namespace}-radio-button__inner {
       @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
     }
   }
   @include m(small) {
-    & .el-radio-button__inner {
+    & .#{$namespace}-radio-button__inner {
       @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
     }
   }
   @include m(mini) {
-    & .el-radio-button__inner {
+    & .#{$namespace}-radio-button__inner {
       @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
     }
   }
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index 4d8faf1798..9c56902663 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -32,7 +32,7 @@
       border-color: $--border-color-lighter;
     }
 
-    & + .el-radio.is-bordered {
+    & + .#{$namespace}-radio.is-bordered {
       margin-left: 10px;
     }
   }
@@ -42,10 +42,10 @@
       padding: $--radio-bordered-medium-padding;
       border-radius: $--button-medium-border-radius;
       height: $--radio-bordered-medium-height;
-      .el-radio__label {
+      .#{$namespace}-radio__label {
         font-size: $--button-medium-font-size;
       }
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         height: $--radio-bordered-medium-input-height;
         width: $--radio-bordered-medium-input-width;
       }
@@ -56,10 +56,10 @@
       padding: $--radio-bordered-small-padding;
       border-radius: $--button-small-border-radius;
       height: $--radio-bordered-small-height;
-      .el-radio__label {
+      .#{$namespace}-radio__label {
         font-size: $--button-small-font-size;
       }
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         height: $--radio-bordered-small-input-height;
         width: $--radio-bordered-small-input-width;
       }
@@ -70,10 +70,10 @@
       padding: $--radio-bordered-mini-padding;
       border-radius: $--button-mini-border-radius;
       height: $--radio-bordered-mini-height;
-      .el-radio__label {
+      .#{$namespace}-radio__label {
         font-size: $--button-mini-font-size;
       }
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         height: $--radio-bordered-mini-input-height;
         width: $--radio-bordered-mini-input-width;
       }
@@ -94,7 +94,7 @@
     vertical-align: middle;
 
     @include when(disabled) {
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         background-color: $--radio-disabled-input-fill;
         border-color: $--radio-disabled-input-border-color;
         cursor: not-allowed;
@@ -104,12 +104,12 @@
           background-color: $--radio-disabled-icon-color;
         }
 
-        & + .el-radio__label {
+        & + .#{$namespace}-radio__label {
           cursor: not-allowed;
         }
       }
       &.is-checked {
-        .el-radio__inner {
+        .#{$namespace}-radio__inner {
           background-color: $--radio-disabled-checked-input-fill;
           border-color: $--radio-disabled-checked-input-border-color;
 
@@ -118,14 +118,14 @@
           }
         }
       }
-      & + span.el-radio__label {
+      & + span.#{$namespace}-radio__label {
         color: $--color-text-placeholder;
         cursor: not-allowed;
       }
     }
 
     @include when(checked) {
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         border-color: $--radio-checked-input-border-color;
         background: $--radio-checked-icon-color;
 
@@ -134,13 +134,13 @@
         }
       }
 
-      & + .el-radio__label {
+      & + .#{$namespace}-radio__label {
         color: $--radio-checked-font-color;
       }
     }
 
     @include when(focus) {
-      .el-radio__inner {
+      .#{$namespace}-radio__inner {
         border-color: $--radio-input-border-color-hover;
       }
     }
@@ -187,7 +187,7 @@
   }
 
   &:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
-    .el-radio__inner {
+    .#{$namespace}-radio__inner {
       box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
     }
   }
diff --git a/packages/theme-chalk/src/scrollbar.scss b/packages/theme-chalk/src/scrollbar.scss
index aa58930a06..f451414ec3 100644
--- a/packages/theme-chalk/src/scrollbar.scss
+++ b/packages/theme-chalk/src/scrollbar.scss
@@ -60,15 +60,15 @@
   }
 }
 
-.el-scrollbar-fade-enter-active {
+.#{$namespace}-scrollbar-fade-enter-active {
   transition: opacity 340ms ease-out;
 }
 
-.el-scrollbar-fade-leave-active {
+.#{$namespace}-scrollbar-fade-leave-active {
   transition: opacity 120ms ease-out;
 }
 
-.el-scrollbar-fade-enter-from,
-.el-scrollbar-fade-leave-active {
+.#{$namespace}-scrollbar-fade-enter-from,
+.#{$namespace}-scrollbar-fade-leave-active {
   opacity: 0;
 }
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index 1ef2c9849b..0b4f350404 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -8,7 +8,7 @@
   box-sizing: border-box;
 
   @include when(multiple) {
-    & .el-select-dropdown__item.selected {
+    & .#{$namespace}-select-dropdown__item.selected {
       color: $--select-option-selected-font-color;
       background-color: $--select-dropdown-background;
 
@@ -29,7 +29,7 @@
     }
   }
 
-  .el-scrollbar.is-empty .el-select-dropdown__list{
+  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list{
     padding: 0;
   }
 }
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index e3c59ff439..e8a8fc5f06 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -33,24 +33,24 @@
     line-height: $--input-medium-height;
   }
 
-  .el-select__tags > span {
+  .#{$namespace}-select__tags > span {
     display: inline-block;
   }
 
   &:hover {
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       border-color: $--select-border-color-hover;
     }
   }
 
-  .el-select__tags-text {
+  .#{$namespace}-select__tags-text {
     text-overflow: ellipsis;
     display: inline-block;
     overflow-x: hidden;
     vertical-align: bottom;
   }
 
-  .el-input__inner {
+  .#{$namespace}-input__inner {
     cursor: pointer;
     padding-right: 35px;
     display: block;
@@ -60,10 +60,10 @@
     }
   }
 
-  .el-input {
+  .#{$namespace}-input {
     display: block;
 
-    & .el-select__caret {
+    & .#{$namespace}-select__caret {
       color: $--select-input-color;
       font-size: $--select-input-font-size;
       transition: transform 0.3s;
@@ -89,7 +89,7 @@
     }
 
     &.is-disabled {
-      & .el-input__inner {
+      & .#{$namespace}-input__inner {
         cursor: not-allowed;
 
         &:hover {
@@ -98,7 +98,7 @@
       }
     }
 
-    &.is-focus .el-input__inner {
+    &.is-focus .#{$namespace}-input__inner {
       border-color: $--select-input-focus-border-color;
     }
   }
@@ -145,17 +145,17 @@
     flex-wrap: wrap;
   }
 
-  .el-tag__close {
+  .#{$namespace}-tag__close {
     margin-top: -2px;
   }
 
-  .el-select__tags .el-tag {
+  .#{$namespace}-select__tags .#{$namespace}-tag {
     box-sizing: border-box;
     border-color: transparent;
     margin: 2px 0 2px 6px;
     background-color: #f0f2f5;
 
-    .el-icon-close {
+    .#{$namespace}-icon-close {
       background-color: $--color-text-placeholder;
       right: -7px;
       top: 0;
diff --git a/packages/theme-chalk/src/skeleton.scss b/packages/theme-chalk/src/skeleton.scss
index 01ed4f2c79..5bbfa08f3f 100644
--- a/packages/theme-chalk/src/skeleton.scss
+++ b/packages/theme-chalk/src/skeleton.scss
@@ -10,10 +10,10 @@
     $--skeleton-color 63%
   );
   background-size: 400% 100%;
-  animation: el-skeleton-loading 1.4s ease infinite;
+  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
 }
 
-@keyframes el-skeleton-loading {
+@keyframes #{$namespace}-skeleton-loading {
   0% {
     background-position: 100% 50%;
   }
@@ -33,7 +33,7 @@
   }
 
   @include when(animated) {
-    .el-skeleton__item {
+    .#{$namespace}-skeleton__item {
       @include skeleton-color();
     }
   }
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index a9935745a4..fe0895ce72 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -26,15 +26,15 @@
     &.disabled {
       cursor: default;
 
-      .el-slider__bar {
+      .#{$namespace}-slider__bar {
         background-color: $--slider-disable-color;
       }
 
-      .el-slider__button {
+      .#{$namespace}-slider__button {
         border-color: $--slider-disable-color;
       }
 
-      .el-slider__button-wrapper {
+      .#{$namespace}-slider__button-wrapper {
         &:hover,
         &.hover {
           cursor: not-allowed;
@@ -45,7 +45,7 @@
         }
       }
 
-      .el-slider__button {
+      .#{$namespace}-slider__button {
         &:hover,
         &.hover,
         &.dragging {
@@ -69,15 +69,15 @@
     margin-top: 3px;
     width: 130px;
 
-    &.el-input-number--mini {
+    &.#{$namespace}-input-number--mini {
       margin-top: 5px;
     }
 
-    &.el-input-number--medium {
+    &.#{$namespace}-input-number--medium {
       margin-top: 0;
     }
 
-    &.el-input-number--large {
+    &.#{$namespace}-input-number--large {
       margin-top: -2px;
     }
   }
@@ -168,40 +168,40 @@
 
   @include when(vertical) {
     position: relative;
-    .el-slider__runway {
+    .#{$namespace}-slider__runway {
       width: $--slider-height;
       height: 100%;
       margin: 0 16px;
     }
-    .el-slider__bar {
+    .#{$namespace}-slider__bar {
       width: $--slider-height;
       height: auto;
       border-radius: 0 0 3px 3px;
     }
-    .el-slider__button-wrapper {
+    .#{$namespace}-slider__button-wrapper {
       top: auto;
       left: $--slider-button-wrapper-offset;
       transform: translateY(50%);
     }
-    .el-slider__stop {
+    .#{$namespace}-slider__stop {
       transform: translateY(50%);
     }
-    &.el-slider--with-input {
+    &.#{$namespace}-slider--with-input {
       padding-bottom: #{$--input-medium-height + 22px};
-      .el-slider__input {
+      .#{$namespace}-slider__input {
         overflow: visible;
         float: none;
         position: absolute;
         bottom: 22px;
         width: 36px;
         margin-top: 15px;
-        .el-input__inner {
+        .#{$namespace}-input__inner {
           text-align: center;
           padding-left: 5px;
           padding-right: 5px;
         }
-        .el-input-number__decrease,
-        .el-input-number__increase
+        .#{$namespace}-input-number__decrease,
+        .#{$namespace}-input-number__increase
         {
           top: $--input-small-height;
           margin-top: -1px;
@@ -210,29 +210,29 @@
           box-sizing: border-box;
           transition: $--border-transition-base;
         }
-        .el-input-number__decrease {
+        .#{$namespace}-input-number__decrease {
           width: 18px;
           right: 18px;
           border-bottom-left-radius: $--input-border-radius;
         }
-        .el-input-number__increase {
+        .#{$namespace}-input-number__increase {
           width: 19px;
           border-bottom-right-radius: $--input-border-radius;
-          & ~ .el-input .el-input__inner {
+          & ~ .#{$namespace}-input .#{$namespace}-input__inner {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
           }
         }
         &:hover {
-          .el-input-number__decrease,
-          .el-input-number__increase
+          .#{$namespace}-input-number__decrease,
+          .#{$namespace}-input-number__increase
           {
             border-color: $--input-hover-border;
           }
         }
         &:active {
-          .el-input-number__decrease,
-          .el-input-number__increase
+          .#{$namespace}-input-number__decrease,
+          .#{$namespace}-input-number__increase
           {
             border-color: $--input-focus-border;
           }
diff --git a/packages/theme-chalk/src/step.scss b/packages/theme-chalk/src/step.scss
index 37a831c5da..08bc1bc26d 100644
--- a/packages/theme-chalk/src/step.scss
+++ b/packages/theme-chalk/src/step.scss
@@ -84,7 +84,7 @@
     line-height: 1;
     color: inherit;
 
-    &[class*=el-icon]:not(.is-status) {
+    &[class*=#{$namespace}-icon]:not(.is-status) {
       font-size: 25px;
       font-weight: normal;
     }
@@ -253,7 +253,7 @@
     }
 
     @include e(icon-inner) {
-      &[class*=el-icon]:not(.is-status) {
+      &[class*=#{$namespace}-icon]:not(.is-status) {
         font-size: 18px;
       }
 
diff --git a/packages/theme-chalk/src/switch.scss b/packages/theme-chalk/src/switch.scss
index b5516b1185..8007b79d9a 100644
--- a/packages/theme-chalk/src/switch.scss
+++ b/packages/theme-chalk/src/switch.scss
@@ -10,8 +10,8 @@
   height: $--switch-height;
   vertical-align: middle;
   @include when(disabled) {
-    & .el-switch__core,
-    & .el-switch__label {
+    & .#{$namespace}-switch__core,
+    & .#{$namespace}-switch__label {
       cursor: not-allowed;
     }
   }
@@ -66,7 +66,7 @@
     transition: border-color .3s, background-color .3s;
     vertical-align: middle;
 
-    .el-switch__action{
+    .#{$namespace}-switch__action{
       position: absolute;
       top: 1px;
       left: 1px;
@@ -83,10 +83,10 @@
   }
 
   @include when(checked) {
-    .el-switch__core {
+    .#{$namespace}-switch__core {
       border-color: $--switch-on-color;
       background-color: $--switch-on-color;
-      .el-switch__action{
+      .#{$namespace}-switch__action{
         left: 100%;
         margin-left: -$--switch-button-size - 1px;
         color:$--switch-on-color ;
@@ -99,13 +99,13 @@
   }
 
   @include m(wide) {
-    .el-switch__label {
-      &.el-switch__label--left {
+    .#{$namespace}-switch__label {
+      &.#{$namespace}-switch__label--left {
         span {
           left: 10px;
         }
       }
-      &.el-switch__label--right {
+      &.#{$namespace}-switch__label--right {
         span {
           right: 10px;
         }
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
index 6fd54e7a47..fd786eadc1 100644
--- a/packages/theme-chalk/src/table-column.scss
+++ b/packages/theme-chalk/src/table-column.scss
@@ -83,14 +83,14 @@
   @include e(checkbox-group) {
     padding: 10px;
 
-    label.el-checkbox {
+    label.#{$namespace}-checkbox {
       display: block;
       margin-right: 5px;
       margin-bottom: 8px;
       margin-left: 5px;
     }
 
-    .el-checkbox:last-child {
+    .#{$namespace}-checkbox:last-child {
       margin-bottom: 0;
     }
   }
diff --git a/packages/theme-chalk/src/table.scss b/packages/theme-chalk/src/table.scss
index 108e64bf20..6b43cfa0e4 100644
--- a/packages/theme-chalk/src/table.scss
+++ b/packages/theme-chalk/src/table.scss
@@ -53,7 +53,7 @@
       transform: rotate(90deg);
     }
 
-    > .el-icon {
+    > .#{$namespace}-icon {
       position: absolute;
       left: 50%;
       top: 50%;
@@ -95,13 +95,13 @@
   }
 
   @include m(scrollable-x) {
-    .el-table__body-wrapper {
+    .#{$namespace}-table__body-wrapper {
       overflow-x: auto;
     }
   }
 
   @include m(scrollable-y) {
-    .el-table__body-wrapper {
+    .#{$namespace}-table__body-wrapper {
       overflow-y: auto;
     }
   }
@@ -233,7 +233,7 @@
     padding-left: 10px;
     padding-right: 10px;
 
-    &.el-tooltip {
+    &.#{$namespace}-tooltip {
       white-space: nowrap;
       min-width: 50px;
     }
@@ -275,7 +275,7 @@
     border-bottom: none;
 
     // fix: #1013
-    // &.el-loading-parent--relative {
+    // &.#{$namespace}-loading-parent--relative {
     //   border-color: transparent;
     // }
 
@@ -334,9 +334,9 @@
     left: auto;
     right: 0;
 
-    .el-table__fixed-header-wrapper,
-    .el-table__fixed-body-wrapper,
-    .el-table__fixed-footer-wrapper {
+    .#{$namespace}-table__fixed-header-wrapper,
+    .#{$namespace}-table__fixed-body-wrapper,
+    .#{$namespace}-table__fixed-footer-wrapper {
       left: auto;
       right: 0;
     }
@@ -400,33 +400,33 @@
     position: relative;
 
     @include when(scrolling-none) {
-      ~ .el-table__fixed,
-      ~ .el-table__fixed-right {
+      ~ .#{$namespace}-table__fixed,
+      ~ .#{$namespace}-table__fixed-right {
         box-shadow: none;
       }
     }
 
     @include when(scrolling-left) {
-      ~ .el-table__fixed {
+      ~ .#{$namespace}-table__fixed {
         box-shadow: none;
       }
     }
 
     @include when(scrolling-right) {
-      ~ .el-table__fixed-right {
+      ~ .#{$namespace}-table__fixed-right {
         box-shadow: none;
       }
     }
 
-    .el-table--border {
+    .#{$namespace}-table--border {
       @include when(scrolling-right) {
-        ~ .el-table__fixed-right {
+        ~ .#{$namespace}-table__fixed-right {
           border-left: $--table-border;
         }
       }
 
       @include when(scrolling-left) {
-        ~ .el-table__fixed {
+        ~ .#{$namespace}-table__fixed {
           border-right: $--table-border;
         }
       }
@@ -478,8 +478,8 @@
   }
 
   @include m(striped) {
-    & .el-table__body {
-      & tr.el-table__row--striped {
+    & .#{$namespace}-table__body {
+      & tr.#{$namespace}-table__row--striped {
         td {
           background: #FAFAFA;
         }
@@ -493,7 +493,7 @@
 
   @include e(body) {
     tr.hover-row {
-      &, &.el-table__row--striped {
+      &, &.#{$namespace}-table__row--striped {
         &, &.current-row {
           > td {
             background-color: $--table-row-hover-background-color;
@@ -530,27 +530,27 @@
   }
 
   @include m(enable-row-transition) {
-    .el-table__body td {
+    .#{$namespace}-table__body td {
       transition: background-color .25s ease;
     }
   }
 
   @include m(enable-row-hover) {
-    .el-table__body tr:hover > td {
+    .#{$namespace}-table__body tr:hover > td {
       background-color: $--table-row-hover-background-color;
     }
   }
 
   @include m(fluid-height) {
-    .el-table__fixed,
-    .el-table__fixed-right {
+    .#{$namespace}-table__fixed,
+    .#{$namespace}-table__fixed-right {
       bottom: 0;
       overflow: hidden;
     }
   }
 
-  [class*=el-table__row--level] {
-    .el-table__expand-icon {
+  [class*=#{$namespace}-table__row--level] {
+    .#{$namespace}-table__expand-icon {
       display: inline-block;
       width: 20px;
       line-height: 20px;
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 1ed4699125..15f83793bb 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -31,7 +31,7 @@
     cursor: pointer;
     transition: all .15s;
 
-    .el-icon-plus {
+    .#{$namespace}-icon-plus {
       transform: scale(0.8, 0.8);
     }
 
@@ -108,7 +108,7 @@
       outline: none;
     }
 
-    & .el-icon-close {
+    & .#{$namespace}-icon-close {
       border-radius: 50%;
       text-align: center;
       transition: all .3s cubic-bezier(.645,.045,.355,1);
@@ -143,22 +143,22 @@
     position: relative;
   }
   @include m(card) {
-    > .el-tabs__header {
+    > .#{$namespace}-tabs__header {
       border-bottom: 1px solid $--border-color-light;
     }
-    > .el-tabs__header .el-tabs__nav-wrap::after {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
       content: none;
     }
-    > .el-tabs__header .el-tabs__nav {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
       border: 1px solid $--border-color-light;
       border-bottom: none;
       border-radius: 4px 4px 0 0;
       box-sizing: border-box;
     }
-    > .el-tabs__header .el-tabs__active-bar {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
       display: none;
     }
-    > .el-tabs__header .el-tabs__item .el-icon-close {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .#{$namespace}-icon-close {
       position: relative;
       font-size: 12px;
       width: 0;
@@ -170,7 +170,7 @@
       right: -2px;
       transform-origin: 100% 50%;
     }
-    > .el-tabs__header .el-tabs__item {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid $--border-color-light;
       transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1);
@@ -182,7 +182,7 @@
           padding-left: 13px;
           padding-right: 13px;
 
-          & .el-icon-close {
+          & .#{$namespace}-icon-close {
             width: 14px;
           }
         }
@@ -194,7 +194,7 @@
           padding-left: 20px;
           padding-right: 20px;
 
-          .el-icon-close {
+          .#{$namespace}-icon-close {
             width: 14px;
           }
         }
@@ -206,18 +206,18 @@
     border: 1px solid $--border-color-base;
     box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
 
-    > .el-tabs__content {
+    > .#{$namespace}-tabs__content {
       padding: 15px;
     }
-    > .el-tabs__header {
+    > .#{$namespace}-tabs__header {
       background-color: $--background-color-base;
       border-bottom: 1px solid $--border-color-light;
       margin: 0;
     }
-    > .el-tabs__header .el-tabs__nav-wrap::after {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
       content: none;
     }
-    > .el-tabs__header .el-tabs__item {
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       transition: all .3s cubic-bezier(.645,.045,.355,1);
       border: 1px solid transparent;
       margin-top: -1px;
@@ -227,7 +227,7 @@
         margin-left: -1px;
       }
 
-      & + .el-tabs__item {
+      & + .#{$namespace}-tabs__item {
         margin-left: -1px;
       }
 
@@ -245,50 +245,50 @@
       }
     }
 
-    > .el-tabs__header .is-scrollable .el-tabs__item:first-child {
+    > .#{$namespace}-tabs__header .is-scrollable .#{$namespace}-tabs__item:first-child {
       margin-left: 0;
     }
   }
   @include m((top, bottom)) {
-    .el-tabs__item.is-top:nth-child(2),
-    .el-tabs__item.is-bottom:nth-child(2) {
+    .#{$namespace}-tabs__item.is-top:nth-child(2),
+    .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
       padding-left: 0;
     }
-    .el-tabs__item.is-top:last-child,
-    .el-tabs__item.is-bottom:last-child {
+    .#{$namespace}-tabs__item.is-top:last-child,
+    .#{$namespace}-tabs__item.is-bottom:last-child {
       padding-right: 0;
     }
 
-    &.el-tabs--border-card, &.el-tabs--card,
-    .el-tabs--left, .el-tabs--right {
-      > .el-tabs__header {
-        .el-tabs__item:nth-child(2) {
+    &.#{$namespace}-tabs--border-card, &.#{$namespace}-tabs--card,
+    .#{$namespace}-tabs--left, .#{$namespace}-tabs--right {
+      > .#{$namespace}-tabs__header {
+        .#{$namespace}-tabs__item:nth-child(2) {
           padding-left: 20px;
         }
-        .el-tabs__item:last-child {
+        .#{$namespace}-tabs__item:last-child {
           padding-right: 20px;
         }
       }
     }
   }
   @include m(bottom) {
-    .el-tabs__header.is-bottom {
+    .#{$namespace}-tabs__header.is-bottom {
       margin-bottom: 0;
       margin-top: 10px;
     }
-    &.el-tabs--border-card {
-      .el-tabs__header.is-bottom {
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-bottom {
         border-bottom: 0;
         border-top: 1px solid $--border-color-base;
       }
-      .el-tabs__nav-wrap.is-bottom {
+      .#{$namespace}-tabs__nav-wrap.is-bottom {
         margin-top: -1px;
         margin-bottom: 0;
       }
-      .el-tabs__item.is-bottom:not(.is-active) {
+      .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
         border: 1px solid transparent;
       }
-      .el-tabs__item.is-bottom {
+      .#{$namespace}-tabs__item.is-bottom {
         margin: 0 -1px -1px -1px;
       }
     }
@@ -296,28 +296,28 @@
   @include m((left, right)) {
     overflow: hidden;
 
-    .el-tabs__header.is-left,
-    .el-tabs__header.is-right,
-    .el-tabs__nav-wrap.is-left,
-    .el-tabs__nav-wrap.is-right,
-    .el-tabs__nav-scroll {
+    .#{$namespace}-tabs__header.is-left,
+    .#{$namespace}-tabs__header.is-right,
+    .#{$namespace}-tabs__nav-wrap.is-left,
+    .#{$namespace}-tabs__nav-wrap.is-right,
+    .#{$namespace}-tabs__nav-scroll {
       height: 100%;
     }
 
-    .el-tabs__active-bar.is-left,
-    .el-tabs__active-bar.is-right {
+    .#{$namespace}-tabs__active-bar.is-left,
+    .#{$namespace}-tabs__active-bar.is-right {
       top: 0;
       bottom: auto;
       width: 2px;
       height: auto;
     }
 
-    .el-tabs__nav-wrap.is-left,
-    .el-tabs__nav-wrap.is-right {
+    .#{$namespace}-tabs__nav-wrap.is-left,
+    .#{$namespace}-tabs__nav-wrap.is-right {
       margin-bottom: 0;
 
-      > .el-tabs__nav-prev,
-      > .el-tabs__nav-next {
+      > .#{$namespace}-tabs__nav-prev,
+      > .#{$namespace}-tabs__nav-next {
         height: 30px;
         line-height: 30px;
         width: 100%;
@@ -328,11 +328,11 @@
           transform: rotateZ(90deg);
         }
       }
-      > .el-tabs__nav-prev {
+      > .#{$namespace}-tabs__nav-prev {
         left: auto;
         top: 0;
       }
-      > .el-tabs__nav-next {
+      > .#{$namespace}-tabs__nav-next {
         right: auto;
         bottom: 0;
       }
@@ -349,52 +349,52 @@
       }
     }
 
-    .el-tabs__nav.is-left,
-    .el-tabs__nav.is-right {
+    .#{$namespace}-tabs__nav.is-left,
+    .#{$namespace}-tabs__nav.is-right {
       float: none;
     }
-    .el-tabs__item.is-left,
-    .el-tabs__item.is-right {
+    .#{$namespace}-tabs__item.is-left,
+    .#{$namespace}-tabs__item.is-right {
       display: block;
     }
   }
   @include m(left) {
-    .el-tabs__header.is-left {
+    .#{$namespace}-tabs__header.is-left {
       float: left;
       margin-bottom: 0;
       margin-right: 10px;
     }
-    .el-tabs__nav-wrap.is-left {
+    .#{$namespace}-tabs__nav-wrap.is-left {
       margin-right: -1px;
       &::after {
         left: auto;
         right: 0;
       }
     }
-    .el-tabs__active-bar.is-left {
+    .#{$namespace}-tabs__active-bar.is-left {
       right: 0;
       left: auto;
     }
-    .el-tabs__item.is-left {
+    .#{$namespace}-tabs__item.is-left {
       text-align: right;
     }
 
-    &.el-tabs--card {
-      .el-tabs__active-bar.is-left {
+    &.#{$namespace}-tabs--card {
+      .#{$namespace}-tabs__active-bar.is-left {
         display: none;
       }
-      .el-tabs__item.is-left {
+      .#{$namespace}-tabs__item.is-left {
         border-left: none;
         border-right: 1px solid $--border-color-light;
         border-bottom: none;
         border-top: 1px solid $--border-color-light;
         text-align: left;
       }
-      .el-tabs__item.is-left:first-child {
+      .#{$namespace}-tabs__item.is-left:first-child {
         border-right: 1px solid $--border-color-light;
         border-top: none;
       }
-      .el-tabs__item.is-left.is-active {
+      .#{$namespace}-tabs__item.is-left.is-active {
         border: 1px solid $--border-color-light;
         border-right-color: #fff;
         border-left: none;
@@ -408,22 +408,22 @@
         }
       }
 
-      .el-tabs__nav {
+      .#{$namespace}-tabs__nav {
         border-radius: 4px 0 0 4px;
         border-bottom: 1px solid $--border-color-light;
         border-right: none;
       }
 
-      .el-tabs__new-tab {
+      .#{$namespace}-tabs__new-tab {
         float: none;
       }
     }
 
-    &.el-tabs--border-card {
-      .el-tabs__header.is-left {
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-left {
         border-right: 1px solid #dfe4ed;
       }
-      .el-tabs__item.is-left {
+      .#{$namespace}-tabs__item.is-left {
         border: 1px solid transparent;
         margin: -1px 0 -1px -1px;
 
@@ -436,13 +436,13 @@
     }
   }
   @include m(right) {
-    .el-tabs__header.is-right {
+    .#{$namespace}-tabs__header.is-right {
       float: right;
       margin-bottom: 0;
       margin-left: 10px;
     }
 
-    .el-tabs__nav-wrap.is-right {
+    .#{$namespace}-tabs__nav-wrap.is-right {
       margin-left: -1px;
       &::after {
         left: 0;
@@ -450,23 +450,23 @@
       }
     }
 
-    .el-tabs__active-bar.is-right {
+    .#{$namespace}-tabs__active-bar.is-right {
       left: 0;
     }
 
-    &.el-tabs--card {
-      .el-tabs__active-bar.is-right {
+    &.#{$namespace}-tabs--card {
+      .#{$namespace}-tabs__active-bar.is-right {
         display: none;
       }
-      .el-tabs__item.is-right {
+      .#{$namespace}-tabs__item.is-right {
         border-bottom: none;
         border-top: 1px solid $--border-color-light;
       }
-      .el-tabs__item.is-right:first-child {
+      .#{$namespace}-tabs__item.is-right:first-child {
         border-left: 1px solid $--border-color-light;
         border-top: none;
       }
-      .el-tabs__item.is-right.is-active {
+      .#{$namespace}-tabs__item.is-right.is-active {
         border: 1px solid $--border-color-light;
         border-left-color: #fff;
         border-right: none;
@@ -480,17 +480,17 @@
         }
       }
 
-      .el-tabs__nav {
+      .#{$namespace}-tabs__nav {
         border-radius: 0 4px 4px 0;
         border-bottom: 1px solid $--border-color-light;
         border-left: none;
       }
     }
-    &.el-tabs--border-card {
-      .el-tabs__header.is-right {
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-right {
         border-left: 1px solid #dfe4ed;
       }
-      .el-tabs__item.is-right {
+      .#{$namespace}-tabs__item.is-right {
         border: 1px solid transparent;
         margin: -1px -1px -1px 0;
 
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 162290206f..707c1105a3 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -10,7 +10,7 @@
     border-color: $--tag-primary-color;
   }
 
-  .el-tag__close {
+  .#{$namespace}-tag__close {
     color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
     &:hover {
       color: $--color-white;
@@ -18,7 +18,7 @@
     }
   }
 
-  &.el-tag--info {
+  &.#{$namespace}-tag--info {
     background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
     border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
     color: mix($--tag-info-color, $--color-white, $fontColorWeight);
@@ -27,7 +27,7 @@
       border-color: $--tag-info-color;
     }
 
-    .el-tag__close {
+    .#{$namespace}-tag__close {
       color: mix($--tag-info-color, $--color-white, $fontColorWeight);
       &:hover {
         color: $--color-white;
@@ -36,7 +36,7 @@
     }
   }
 
-  &.el-tag--success {
+  &.#{$namespace}-tag--success {
     background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
     border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
     color: mix($--tag-success-color, $--color-white, $fontColorWeight);
@@ -45,7 +45,7 @@
       border-color: $--tag-success-color;
     }
 
-    .el-tag__close {
+    .#{$namespace}-tag__close {
       color: mix($--tag-success-color, $--color-white, $fontColorWeight);
       &:hover {
         color: $--color-white;
@@ -54,7 +54,7 @@
     }
   }
 
-  &.el-tag--warning {
+  &.#{$namespace}-tag--warning {
     background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight);
     border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight);
     color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
@@ -63,7 +63,7 @@
       border-color: $--tag-warning-color;
     }
 
-    .el-tag__close {
+    .#{$namespace}-tag__close {
       color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
       &:hover {
         color: $--color-white;
@@ -72,7 +72,7 @@
     }
   }
 
-  &.el-tag--danger {
+  &.#{$namespace}-tag--danger {
     background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
     border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
     color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
@@ -81,7 +81,7 @@
       border-color: $--tag-danger-color;
     }
 
-    .el-tag__close {
+    .#{$namespace}-tag__close {
       color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
       &:hover {
         color: $--color-white;
@@ -105,7 +105,7 @@
   box-sizing: border-box;
   white-space: nowrap;
 
-  .el-icon-close {
+  .#{$namespace}-icon-close {
     border-radius: 50%;
     text-align: center;
     position: relative;
@@ -135,7 +135,7 @@
     height: 28px;
     line-height: 26px;
 
-    .el-icon-close {
+    .#{$namespace}-icon-close {
       transform: scale(.8);
     }
   }
@@ -145,7 +145,7 @@
     padding: 0 8px;
     line-height: 22px;
 
-    .el-icon-close {
+    .#{$namespace}-icon-close {
       transform: scale(.8);
     }
   }
@@ -155,7 +155,7 @@
     padding: 0 5px;
     line-height: 19px;
 
-    .el-icon-close {
+    .#{$namespace}-icon-close {
       margin-left: -3px;
       transform: scale(.7);
     }
diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss
index 0de3853873..99ab9a567c 100644
--- a/packages/theme-chalk/src/time-select.scss
+++ b/packages/theme-chalk/src/time-select.scss
@@ -9,7 +9,7 @@
   min-width: 0;
 }
 
-.time-select .el-picker-panel__content {
+.time-select .#{$namespace}-picker-panel__content {
   max-height: 200px;
   margin: 0;
 }
diff --git a/packages/theme-chalk/src/timeline.scss b/packages/theme-chalk/src/timeline.scss
index 60a779ecaf..4ff8e3c736 100644
--- a/packages/theme-chalk/src/timeline.scss
+++ b/packages/theme-chalk/src/timeline.scss
@@ -6,8 +6,8 @@
   font-size: $--font-size-base;
   list-style: none;
 
-  & .el-timeline-item:last-child {
-    & .el-timeline-item__tail {
+  & .#{$namespace}-timeline-item:last-child {
+    & .#{$namespace}-timeline-item__tail {
       display: none;
     }
   }
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index fea7d7badd..27c00ea3aa 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -52,7 +52,7 @@
       font-size: 14px;
     }
 
-    & [class*="el-icon-"] + span {
+    & [class*="#{$namespace}-icon-"] + span {
       margin-left: 0;
     }
   }
@@ -98,11 +98,11 @@
     padding-left: 15px;
     display: block !important;
 
-    & + .el-transfer-panel__item {
+    & + .#{$namespace}-transfer-panel__item {
       margin-left: 0;
     }
 
-    &.el-checkbox {
+    &.#{$namespace}-checkbox {
       color: $--color-text-regular;
     }
 
@@ -110,7 +110,7 @@
       color: $--color-primary;
     }
 
-    &.el-checkbox .el-checkbox__label {
+    &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
       width: 100%;
       @include utils-ellipsis;
       display: block;
@@ -119,7 +119,7 @@
       line-height: $--transfer-item-height;
     }
 
-    .el-checkbox__input {
+    .#{$namespace}-checkbox__input {
       position: absolute;
       top: 8px;
     }
@@ -132,7 +132,7 @@
     display: block;
     width: auto;
 
-    .el-input__inner {
+    .#{$namespace}-input__inner {
       height: $--transfer-filter-height;
       width: 100%;
       font-size: 12px;
@@ -143,16 +143,16 @@
       padding-left: 30px;
     }
 
-    .el-input__icon {
+    .#{$namespace}-input__icon {
       margin-left: 5px;
     }
 
-    .el-icon-circle-close {
+    .#{$namespace}-icon-circle-close {
       cursor: pointer;
     }
   }
 
-  .el-transfer-panel__header {
+  .#{$namespace}-transfer-panel__header {
     height: $--transfer-panel-header-height;
     line-height: $--transfer-panel-header-height;
     background: $--transfer-panel-header-background-color;
@@ -162,11 +162,11 @@
     box-sizing: border-box;
     color: $--color-black;
 
-    .el-checkbox {
+    .#{$namespace}-checkbox {
       display: block;
       line-height: 40px;
 
-      .el-checkbox__label {
+      .#{$namespace}-checkbox__label {
         font-size: 16px;
         color: $--color-text-primary;
         font-weight: normal;
@@ -182,7 +182,7 @@
     }
   }
 
-  .el-transfer-panel__footer {
+  .#{$namespace}-transfer-panel__footer {
     height: $--transfer-panel-footer-height;
     background: $--color-white;
     margin: 0;
@@ -195,13 +195,13 @@
     z-index: $--index-normal;
     @include utils-vertical-center;
 
-    .el-checkbox {
+    .#{$namespace}-checkbox {
       padding-left: 20px;
       color: $--color-text-regular;
     }
   }
 
-  .el-transfer-panel__empty {
+  .#{$namespace}-transfer-panel__empty {
     margin: 0;
     height: $--transfer-item-height;
     line-height: $--transfer-item-height;
@@ -210,11 +210,11 @@
     text-align: center;
   }
 
-  .el-checkbox__label {
+  .#{$namespace}-checkbox__label {
     padding-left: 8px;
   }
 
-  .el-checkbox__inner {
+  .#{$namespace}-checkbox__inner {
     height: 14px;
     width: 14px;
     border-radius: 3px;
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index c3b18de181..ab9777c382 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -39,13 +39,13 @@
   white-space: nowrap;
   outline: none;
   &:focus { /* focus */
-    > .el-tree-node__content {
+    > .#{$namespace}-tree-node__content {
       background-color: $--tree-node-hover-background-color;
     }
   }
 
   @include when(drop-inner) {
-    > .el-tree-node__content .el-tree-node__label {
+    > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
       background-color: $--color-primary;
       color: #fff;
     }
@@ -57,17 +57,17 @@
     height: 26px;
     cursor: pointer;
 
-    & > .el-tree-node__expand-icon {
+    & > .#{$namespace}-tree-node__expand-icon {
       padding: 6px;
     }
-    & > label.el-checkbox {
+    & > label.#{$namespace}-checkbox {
       margin-right: 8px;
     }
     &:hover {
       background-color: $--tree-node-hover-background-color;
     }
 
-    .el-tree.is-dragging & {
+    .#{$namespace}-tree.is-dragging & {
       cursor: move;
 
       & * {
@@ -75,7 +75,7 @@
       }
     }
 
-    .el-tree.is-dragging.is-drop-not-allow & {
+    .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
       cursor: not-allowed;
     }
   }
@@ -108,16 +108,16 @@
     color: $--tree-expand-icon-color;
   }
 
-  & > .el-tree-node__children {
+  & > .#{$namespace}-tree-node__children {
     overflow: hidden;
     background-color: transparent;
   }
 
-  &.is-expanded > .el-tree-node__children {
+  &.is-expanded > .#{$namespace}-tree-node__children {
     display: block;
   }
 }
 
-.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+.#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
   background-color: mix($--color-white, $--color-primary, 92%);
 }
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index aebbc1cd59..c14c55f9ce 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -52,7 +52,7 @@
     border-color: $--color-primary;
     color: $--color-primary;
 
-    .el-upload-dragger {
+    .#{$namespace}-upload-dragger {
       border-color: $--color-primary;
     }
   }
@@ -70,24 +70,24 @@
   position: relative;
   overflow: hidden;
 
-  .el-icon-upload {
+  .#{$namespace}-icon-upload {
     font-size: 67px;
     color: $--color-text-placeholder;
     margin: 40px 0 16px;
     line-height: 50px;
   }
 
-  + .el-upload__tip {
+  + .#{$namespace}-upload__tip {
     text-align: center;
   }
 
-  ~ .el-upload__files {
+  ~ .#{$namespace}-upload__files {
     border-top: $--border-base;
     margin-top: 7px;
     padding-top: 5px;
   }
 
-  .el-upload__text {
+  .#{$namespace}-upload__text {
     color: $--color-text-regular;
     font-size: 14px;
     text-align: center;
@@ -124,19 +124,19 @@
     border-radius: 4px;
     width: 100%;
 
-    .el-progress {
+    .#{$namespace}-progress {
       position: absolute;
       top: 20px;
       width: 100%;
     }
 
-    .el-progress__text {
+    .#{$namespace}-progress__text {
       position: absolute;
       right: 0;
       top: -13px;
     }
 
-    .el-progress-bar {
+    .#{$namespace}-progress-bar {
       margin-right: 0;
       padding-right: 0;
     }
@@ -145,11 +145,11 @@
       margin-top: 10px;
     }
 
-    & .el-icon-upload-success {
+    & .#{$namespace}-icon-upload-success {
       color: $--color-success;
     }
 
-    .el-icon-close {
+    .#{$namespace}-icon-close {
       display: none;
       position: absolute;
       top: 5px;
@@ -164,7 +164,7 @@
       }
     }
 
-    & .el-icon-close-tip {
+    & .#{$namespace}-icon-close-tip {
       display: none;
       position: absolute;
       top: 5px;
@@ -178,40 +178,40 @@
     &:hover {
       background-color: $--background-color-base;
 
-      .el-icon-close {
+      .#{$namespace}-icon-close {
         display: inline-block;
       }
 
-      .el-progress__text {
+      .#{$namespace}-progress__text {
         display: none;
       }
     }
 
     @include when(success) {
-      .el-upload-list__item-status-label {
+      .#{$namespace}-upload-list__item-status-label {
         display: block;
       }
 
-      .el-upload-list__item-name:hover, .el-upload-list__item-name:focus {
+      .#{$namespace}-upload-list__item-name:hover, .#{$namespace}-upload-list__item-name:focus {
         color: $--link-hover-color;
         cursor: pointer;
       }
 
       &:focus:not(:hover) {  /* 键盘focus */
-        .el-icon-close-tip {
+        .#{$namespace}-icon-close-tip {
           display: inline-block;
         }
       }
 
       &:not(.focusing):focus, &:active { /* click时 */
         outline-width: 0;
-        .el-icon-close-tip {
+        .#{$namespace}-icon-close-tip {
           display: none;
         }
       }
 
       &:hover, &:focus {
-        .el-upload-list__item-status-label {
+        .#{$namespace}-upload-list__item-status-label {
           display: none;
         }
       }
@@ -219,7 +219,7 @@
   }
 
   @include when(disabled) {
-    .el-upload-list__item:hover .el-upload-list__item-status-label {
+    .#{$namespace}-upload-list__item:hover .#{$namespace}-upload-list__item-status-label {
       display: block;
     }
   }
@@ -234,7 +234,7 @@
     transition: color .3s;
     white-space: nowrap;
 
-    [class^="el-icon"] {
+    [class^="#{$namespace}-icon"] {
       height: 100%;
       margin-right: 7px;
       color: $--color-text-secondary;
@@ -268,7 +268,7 @@
     display: inline;
     vertical-align: top;
 
-    .el-upload-list__item {
+    .#{$namespace}-upload-list__item {
       overflow: hidden;
       background-color: #fff;
       border: 1px solid #c0ccda;
@@ -279,35 +279,35 @@
       margin: 0 8px 8px 0;
       display: inline-block;
 
-      .el-icon-check,
-      .el-icon-circle-check {
+      .#{$namespace}-icon-check,
+      .#{$namespace}-icon-circle-check {
         color: $--color-white;
       }
 
-      .el-icon-close {
+      .#{$namespace}-icon-close {
         display: none;
       }
       &:hover {
-        .el-upload-list__item-status-label {
+        .#{$namespace}-upload-list__item-status-label {
           display: none;
         }
 
-        .el-progress__text {
+        .#{$namespace}-progress__text {
           display: block;
         }
       }
     }
 
-    .el-upload-list__item-name {
+    .#{$namespace}-upload-list__item-name {
       display: none;
     }
 
-    .el-upload-list__item-thumbnail {
+    .#{$namespace}-upload-list__item-thumbnail {
       width: 100%;
       height: 100%;
     }
 
-    .el-upload-list__item-status-label {
+    .#{$namespace}-upload-list__item-status-label {
       position: absolute;
       right: -15px;
       top: -6px;
@@ -325,7 +325,7 @@
       }
     }
 
-    .el-upload-list__item-actions {
+    .#{$namespace}-upload-list__item-actions {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -354,7 +354,7 @@
         margin-left: 15px;
       }
 
-      .el-upload-list__item-delete {
+      .#{$namespace}-upload-list__item-delete {
         position: static;
         font-size: inherit;
         color: inherit;
@@ -368,21 +368,21 @@
       }
     }
 
-    .el-progress {
+    .#{$namespace}-progress {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       bottom: auto;
       width: 126px;
 
-      .el-progress__text {
+      .#{$namespace}-progress__text {
         top: 50%;
       }
     }
   }
 
   @include m(picture) {
-    .el-upload-list__item {
+    .#{$namespace}-upload-list__item {
       overflow: hidden;
       z-index: 0;
       background-color: #fff;
@@ -393,26 +393,26 @@
       padding: 10px 10px 10px 90px;
       height: 92px;
 
-      .el-icon-check,
-      .el-icon-circle-check {
+      .#{$namespace}-icon-check,
+      .#{$namespace}-icon-circle-check {
         color: $--color-white;
       }
 
       &:hover {
-        .el-upload-list__item-status-label {
+        .#{$namespace}-upload-list__item-status-label {
           background: transparent;
           box-shadow: none;
           top: -2px;
           right: -12px;
         }
 
-        .el-progress__text {
+        .#{$namespace}-progress__text {
           display: block;
         }
       }
 
       &.is-success {
-        .el-upload-list__item-name {
+        .#{$namespace}-upload-list__item-name {
           line-height: 70px;
           margin-top: 0;
           i {
@@ -422,7 +422,7 @@
       }
     }
 
-    .el-upload-list__item-thumbnail {
+    .#{$namespace}-upload-list__item-thumbnail {
       vertical-align: middle;
       display: inline-block;
       width: 70px;
@@ -434,7 +434,7 @@
       background-color: $--color-white
     }
 
-    .el-upload-list__item-name {
+    .#{$namespace}-upload-list__item-name {
       display: block;
       margin-top: 20px;
 
@@ -447,7 +447,7 @@
       }
     }
 
-    .el-upload-list__item-status-label {
+    .#{$namespace}-upload-list__item-status-label {
       position: absolute;
       right: -17px;
       top: -7px;
@@ -465,7 +465,7 @@
       }
     }
 
-    .el-progress {
+    .#{$namespace}-progress {
       position: relative;
       top: -7px;
     }
@@ -514,7 +514,7 @@
     position: static;
     width: 243px;
 
-    + .el-upload__inner {
+    + .#{$namespace}-upload__inner {
       opacity: 0;
     }
   }
@@ -595,7 +595,7 @@
     color: $--color-text-primary;
   }
 
-  + .el-upload__inner {
+  + .#{$namespace}-upload__inner {
     opacity: 0;
     position: relative;
     z-index: 1;
diff --git a/website/demo-styles/alert.scss b/website/demo-styles/alert.scss
index dae5f062a5..5223a2c06b 100644
--- a/website/demo-styles/alert.scss
+++ b/website/demo-styles/alert.scss
@@ -1,7 +1,7 @@
-.demo-block.demo-alert .el-alert {
+.demo-block.demo-alert .#{$namespace}-alert {
   margin: 20px 0 0;
 }
 
-.demo-block.demo-alert .el-alert:first-child {
+.demo-block.demo-alert .#{$namespace}-alert:first-child {
   margin: 0;
 }
diff --git a/website/demo-styles/avatar.scss b/website/demo-styles/avatar.scss
index d655db787a..5648a1a86d 100644
--- a/website/demo-styles/avatar.scss
+++ b/website/demo-styles/avatar.scss
@@ -24,7 +24,7 @@
     color: #8492a6;
   }
 
-  .el-col:not(:last-child) {
+  .#{$namespace}-col:not(:last-child) {
     border-right: 1px solid rgba(224,230,237,.5);
   }
 
diff --git a/website/demo-styles/badge.scss b/website/demo-styles/badge.scss
index 494dacdedc..672c747f6c 100644
--- a/website/demo-styles/badge.scss
+++ b/website/demo-styles/badge.scss
@@ -1,4 +1,4 @@
-.demo-badge.demo-block .el-dropdown {
+.demo-badge.demo-block .#{$namespace}-dropdown {
   vertical-align: middle;
 }
 .demo-badge.demo-block {
diff --git a/website/demo-styles/button.scss b/website/demo-styles/button.scss
index ad908f9b06..43ea17440a 100644
--- a/website/demo-styles/button.scss
+++ b/website/demo-styles/button.scss
@@ -1,5 +1,5 @@
 .demo-block.demo-button {
-  .el-row {
+  .#{$namespace}-row {
     margin-bottom: 20px;
     align-items: baseline;
 
@@ -7,15 +7,15 @@
       margin-bottom: 0;
     }
   }
-  .el-button + .el-button {
+  .#{$namespace}-button + .#{$namespace}-button {
     margin-left: 10px;
   }
-  .el-button-group {
-    .el-button + .el-button {
+  .#{$namespace}-button-group {
+    .#{$namespace}-button + .#{$namespace}-button {
       margin-left: 0;
     }
 
-    & + .el-button-group {
+    & + .#{$namespace}-button-group {
       margin-left: 10px;
     }
   }
diff --git a/website/demo-styles/carousel.scss b/website/demo-styles/carousel.scss
index dc5295a298..8980dffd57 100644
--- a/website/demo-styles/carousel.scss
+++ b/website/demo-styles/carousel.scss
@@ -17,11 +17,11 @@
   margin-bottom: 20px;
 }
 
-.demo-carousel .el-carousel__container {
+.demo-carousel .#{$namespace}-carousel__container {
   text-align: center;
 }
 
-.demo-carousel .el-carousel__item {
+.demo-carousel .#{$namespace}-carousel__item {
   h3 {
     color: #fff;
     font-size: 18px;
diff --git a/website/demo-styles/cascader.scss b/website/demo-styles/cascader.scss
index 765676c909..94bd4f1f7d 100644
--- a/website/demo-styles/cascader.scss
+++ b/website/demo-styles/cascader.scss
@@ -1,10 +1,10 @@
 .demo-cascader {
-  .el-cascader {
+  .#{$namespace}-cascader {
     width: 222px;
   }
 }
 .demo-cascader-size {
-  .el-cascader {
+  .#{$namespace}-cascader {
     vertical-align: top;
     margin-right: 15px;
   }
diff --git a/website/demo-styles/collapse.scss b/website/demo-styles/collapse.scss
index 11c0d36f69..99564d0484 100644
--- a/website/demo-styles/collapse.scss
+++ b/website/demo-styles/collapse.scss
@@ -1,5 +1,5 @@
 .demo-collapse {
-  .el-collapse-item__header {
+  .#{$namespace}-collapse-item__header {
     .header-icon {
       margin-left: 5px;
     }
diff --git a/website/demo-styles/color-picker.scss b/website/demo-styles/color-picker.scss
index 621cc8accf..278430e9b2 100644
--- a/website/demo-styles/color-picker.scss
+++ b/website/demo-styles/color-picker.scss
@@ -15,6 +15,6 @@
   font-size: 14px;
   margin-bottom: 20px;
 }
-.demo-color-picker .el-color-picker + .el-color-picker {
+.demo-color-picker .#{$namespace}-color-picker + .#{$namespace}-color-picker {
   margin-left: 20px;
 }
diff --git a/website/demo-styles/container.scss b/website/demo-styles/container.scss
index 639655026c..3d3cb7e635 100644
--- a/website/demo-styles/container.scss
+++ b/website/demo-styles/container.scss
@@ -1,44 +1,44 @@
-.el-header,
-.el-footer {
+.#{$namespace}-header,
+.#{$namespace}-footer {
   background-color: #b3c0d1;
   color: #333;
   line-height: 60px;
 }
 
-.el-aside {
+.#{$namespace}-aside {
   color: #333;
 }
 
 .demo-container .common-layout {
-  .el-header,
-  .el-footer {
+  .#{$namespace}-header,
+  .#{$namespace}-footer {
     text-align: center;
   }
 
-  .el-aside {
+  .#{$namespace}-aside {
     background-color: #d3dce6;
     text-align: center;
     line-height: 200px;
   }
 
-  .el-main {
+  .#{$namespace}-main {
     background-color: #e9eef3;
     color: #333;
     text-align: center;
     line-height: 160px;
   }
 
-  .el-container {
+  .#{$namespace}-container {
     margin-bottom: 40px;
     &:last-child {
       margin-bottom: 0;
     }
-    &:nth-child(5) .el-aside,
-    &:nth-child(6) .el-aside {
+    &:nth-child(5) .#{$namespace}-aside,
+    &:nth-child(6) .#{$namespace}-aside {
       line-height: 260px;
     }
 
-    &:nth-child(7) .el-aside {
+    &:nth-child(7) .#{$namespace}-aside {
       line-height: 320px;
     }
   }
diff --git a/website/demo-styles/dialog.scss b/website/demo-styles/dialog.scss
index ddf104332c..e5f2875051 100644
--- a/website/demo-styles/dialog.scss
+++ b/website/demo-styles/dialog.scss
@@ -5,16 +5,16 @@
   .full-image {
     width: 100%;
   }
-  .el-dialog__wrapper {
+  .#{$namespace}-dialog__wrapper {
     margin: 0;
   }
-  .el-select {
+  .#{$namespace}-select {
     width: 300px;
   }
-  .el-input {
+  .#{$namespace}-input {
     width: 300px;
   }
-  .el-button--text {
+  .#{$namespace}-button--text {
     margin-right: 15px;
   }
 }
diff --git a/website/demo-styles/drawer.scss b/website/demo-styles/drawer.scss
index 117136171f..703b29775e 100644
--- a/website/demo-styles/drawer.scss
+++ b/website/demo-styles/drawer.scss
@@ -16,6 +16,6 @@
   }
 }
 
-.el-drawer__body {
+.#{$namespace}-drawer__body {
   padding: 20px;
 }
diff --git a/website/demo-styles/dropdown.scss b/website/demo-styles/dropdown.scss
index 07c20b6cb6..e0d4117f11 100644
--- a/website/demo-styles/dropdown.scss
+++ b/website/demo-styles/dropdown.scss
@@ -1,16 +1,16 @@
 .demo-block {
-  .el-dropdown {
+  .#{$namespace}-dropdown {
     vertical-align: top;
 
-    & + .el-dropdown {
+    & + .#{$namespace}-dropdown {
       margin-left: 15px;
     }
   }
-  .el-dropdown-link {
+  .#{$namespace}-dropdown-link {
     cursor: pointer;
     color: #409eff;
   }
-  .el-icon-arrow-down {
+  .#{$namespace}-icon-arrow-down {
     font-size: 12px;
   }
 }
@@ -18,7 +18,7 @@
 .block-col-2 {
   margin: -24px;
 
-  .el-col {
+  .#{$namespace}-col {
     padding: 30px 0;
     text-align: center;
     border-right: 1px solid #eff2f6;
diff --git a/website/demo-styles/form.scss b/website/demo-styles/form.scss
index 6d04bc83e0..376c8b9150 100644
--- a/website/demo-styles/form.scss
+++ b/website/demo-styles/form.scss
@@ -1,8 +1,8 @@
 .demo-form {
-  .el-select .el-input {
+  .#{$namespace}-select .#{$namespace}-input {
     width: 380px;
   }
-  .el-form {
+  .#{$namespace}-form {
     width: 460px;
   }
 
@@ -10,7 +10,7 @@
     text-align: center;
   }
 
-  .el-checkbox-group {
+  .#{$namespace}-checkbox-group {
     width: 320px;
     margin: 0;
     padding: 0;
@@ -28,14 +28,14 @@
       height: 0;
     }
 
-    .el-checkbox {
+    .#{$namespace}-checkbox {
       float: left;
       width: 160px;
       padding-right: 20px;
       margin: 0;
       padding: 0;
 
-      + .el-checkbox {
+      + .#{$namespace}-checkbox {
         margin-left: 0;
       }
     }
@@ -46,7 +46,7 @@
   .demo-form-inline {
     width: auto;
 
-    .el-input {
+    .#{$namespace}-input {
       width: 150px;
     }
     > * {
@@ -56,12 +56,12 @@
   .demo-ruleForm {
     width: 460px;
 
-    .el-select .el-input {
+    .#{$namespace}-select .#{$namespace}-input {
       width: 360px;
     }
   }
   .demo-dynamic {
-    .el-input {
+    .#{$namespace}-input {
       margin-right: 10px;
       width: 270px;
       vertical-align: top;
diff --git a/website/demo-styles/image.scss b/website/demo-styles/image.scss
index 9bf49967dc..f78c087107 100644
--- a/website/demo-styles/image.scss
+++ b/website/demo-styles/image.scss
@@ -32,7 +32,7 @@
     width: 49%;
   }
 
-  .el-image {
+  .#{$namespace}-image {
     width: 300px;
     height: 200px;
   }
@@ -66,7 +66,7 @@
   height: 400px;
   overflow-y: auto;
 
-  .el-image {
+  .#{$namespace}-image {
     display: block;
     min-height: 200px;
     margin-bottom: 10px;
diff --git a/website/demo-styles/index.scss b/website/demo-styles/index.scss
index 5e2edd56e7..ffa131c66e 100644
--- a/website/demo-styles/index.scss
+++ b/website/demo-styles/index.scss
@@ -1,3 +1,5 @@
+@import 'element-theme-chalk/src/mixins/config.scss';
+
 @import "./affix.scss";
 @import "./alert.scss";
 @import "./badge.scss";
diff --git a/website/demo-styles/input-number.scss b/website/demo-styles/input-number.scss
index b85cff7081..0c122ea5f5 100644
--- a/website/demo-styles/input-number.scss
+++ b/website/demo-styles/input-number.scss
@@ -1,5 +1,5 @@
 .demo-block.demo-input-number {
-  .el-input-number + .el-input-number {
+  .#{$namespace}-input-number + .#{$namespace}-input-number {
     margin-left: 10px;
   }
 }
diff --git a/website/demo-styles/input.scss b/website/demo-styles/input.scss
index 88b51b942f..9bec488623 100644
--- a/website/demo-styles/input.scss
+++ b/website/demo-styles/input.scss
@@ -1,23 +1,23 @@
 .demo-input {
-  .el-select .el-input {
+  .#{$namespace}-select .#{$namespace}-input {
     width: 130px;
   }
-  .el-input {
+  .#{$namespace}-input {
     width: 180px;
   }
-  .el-textarea {
+  .#{$namespace}-textarea {
     width: 414px;
   }
-  .el-input-group {
+  .#{$namespace}-input-group {
     width: 100%;
   }
   .demo-input-size {
-    .el-input {
+    .#{$namespace}-input {
       vertical-align: top;
       margin: 0 10px 10px 0;
     }
   }
-  .input-with-select .el-input-group__prepend {
+  .input-with-select .#{$namespace}-input-group__prepend {
     background-color: #fff;
   }
   .demo-autocomplete {
@@ -29,16 +29,16 @@
       color: #8492a6;
     }
 
-    .el-col:not(:last-child) {
+    .#{$namespace}-col:not(:last-child) {
       border-right: 1px solid rgba(224, 230, 237, 0.5);
     }
 
-    .el-autocomplete {
+    .#{$namespace}-autocomplete {
       text-align: left;
     }
   }
 }
-.el-autocomplete-suggestion.my-autocomplete {
+.#{$namespace}-autocomplete-suggestion.my-autocomplete {
   li {
     line-height: normal;
     padding-top: 7px;
@@ -59,7 +59,7 @@
 }
 .demo-input-suffix {
   margin-bottom: 15px;
-  .el-input {
+  .#{$namespace}-input {
     margin-right: 15px;
   }
 }
diff --git a/website/demo-styles/layout.scss b/website/demo-styles/layout.scss
index df639344fc..d572e4434d 100644
--- a/website/demo-styles/layout.scss
+++ b/website/demo-styles/layout.scss
@@ -1,11 +1,11 @@
 .demo-layout {
-  .el-row {
+  .#{$namespace}-row {
     margin-bottom: 20px;
     &:last-child {
       margin-bottom: 0;
     }
   }
-  .el-col {
+  .#{$namespace}-col {
     border-radius: 4px;
   }
   .bg-purple-dark {
diff --git a/website/demo-styles/loading.scss b/website/demo-styles/loading.scss
index 0fd6e26dc3..bc497631b3 100644
--- a/website/demo-styles/loading.scss
+++ b/website/demo-styles/loading.scss
@@ -1,3 +1,3 @@
-.demo-loading .el-table {
+.demo-loading .#{$namespace}-table {
   border: none;
 }
diff --git a/website/demo-styles/menu.scss b/website/demo-styles/menu.scss
index 3b350216f8..90fb5aea49 100644
--- a/website/demo-styles/menu.scss
+++ b/website/demo-styles/menu.scss
@@ -1,8 +1,8 @@
 .demo-block.demo-menu {
-  .el-menu-demo {
+  .#{$namespace}-menu-demo {
     padding-left: 55px;
   }
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
+  .#{$namespace}-menu-vertical-demo:not(.#{$namespace}-menu--collapse) {
     width: 240px;
     min-height: 400px;
   }
@@ -19,7 +19,7 @@
   .tac {
     text-align: center;
 
-    .el-menu-vertical-demo {
+    .#{$namespace}-menu-vertical-demo {
       display: inline-block;
       text-align: left;
     }
diff --git a/website/demo-styles/pagination.scss b/website/demo-styles/pagination.scss
index 09f751d66f..f284965f16 100644
--- a/website/demo-styles/pagination.scss
+++ b/website/demo-styles/pagination.scss
@@ -40,7 +40,7 @@
   line-height: 44px;
 }
 
-.demo-pagination .last .demonstration + .el-pagination {
+.demo-pagination .last .demonstration + .#{$namespace}-pagination {
   width: 70%;
   margin: 5px 20px 0 0;
 }
diff --git a/website/demo-styles/popover.scss b/website/demo-styles/popover.scss
index ee18df753e..8342b848c4 100644
--- a/website/demo-styles/popover.scss
+++ b/website/demo-styles/popover.scss
@@ -1,11 +1,11 @@
 .demo-block.demo-popover {
-  .el-popover + .el-popover {
+  .#{$namespace}-popover + .#{$namespace}-popover {
     margin-left: 10px;
   }
-  .el-input {
+  .#{$namespace}-input {
     width: 360px;
   }
-  .el-button {
+  .#{$namespace}-button {
     margin-left: 10px;
   }
 }
diff --git a/website/demo-styles/progress.scss b/website/demo-styles/progress.scss
index 216c8d8aef..0738d2c8b5 100644
--- a/website/demo-styles/progress.scss
+++ b/website/demo-styles/progress.scss
@@ -1,9 +1,9 @@
 .demo-block.demo-progress {
-  .el-progress--line {
+  .#{$namespace}-progress--line {
     margin-bottom: 15px;
     width: 350px;
   }
-  .el-progress--circle {
+  .#{$namespace}-progress--circle {
     margin-right: 15px;
   }
 }
diff --git a/website/demo-styles/select.scss b/website/demo-styles/select.scss
index 3d3c8e97fb..53cf75e12e 100644
--- a/website/demo-styles/select.scss
+++ b/website/demo-styles/select.scss
@@ -1,3 +1,3 @@
-.demo-select .el-select {
+.demo-select .#{$namespace}-select {
   width: 240px;
 }
diff --git a/website/demo-styles/skeleton.scss b/website/demo-styles/skeleton.scss
index c349db827c..fa7c809f87 100644
--- a/website/demo-styles/skeleton.scss
+++ b/website/demo-styles/skeleton.scss
@@ -1,5 +1,5 @@
 .demo-block.demo-skeleton {
-  .el-card {
+  .#{$namespace}-card {
     margin-bottom: 16px;
   }
 
diff --git a/website/demo-styles/slider.scss b/website/demo-styles/slider.scss
index 1b600a2c79..6346996bc9 100644
--- a/website/demo-styles/slider.scss
+++ b/website/demo-styles/slider.scss
@@ -17,7 +17,7 @@
   line-height: 44px;
 }
 
-.demo-block.demo-slider .demonstration + .el-slider {
+.demo-block.demo-slider .demonstration + .#{$namespace}-slider {
   float: right;
   width: 70%;
   margin-right: 20px;
diff --git a/website/demo-styles/switch.scss b/website/demo-styles/switch.scss
index d62bb64587..5532e760cf 100644
--- a/website/demo-styles/switch.scss
+++ b/website/demo-styles/switch.scss
@@ -1,5 +1,5 @@
 .demo-block.demo-switch {
-  .el-switch {
+  .#{$namespace}-switch {
     margin: 20px 20px 20px 0;
   }
 }
diff --git a/website/demo-styles/table.scss b/website/demo-styles/table.scss
index ccd16e6e6f..c395556d01 100644
--- a/website/demo-styles/table.scss
+++ b/website/demo-styles/table.scss
@@ -1,8 +1,8 @@
-.el-table .warning-row {
+.#{$namespace}-table .warning-row {
   background: oldlace;
 }
 
-.el-table .success-row {
+.#{$namespace}-table .success-row {
   background: #f0f9eb;
 }
 
@@ -15,7 +15,7 @@
     width: 90px;
     color: #99a9bf;
   }
-  .el-form-item {
+  .#{$namespace}-form-item {
     margin-right: 0;
     margin-bottom: 0;
     width: 50%;
diff --git a/website/demo-styles/tag.scss b/website/demo-styles/tag.scss
index 967d05bddf..02bc062af2 100644
--- a/website/demo-styles/tag.scss
+++ b/website/demo-styles/tag.scss
@@ -1,5 +1,5 @@
 .demo-block.demo-tag {
-  .el-tag + .el-tag {
+  .#{$namespace}-tag + .#{$namespace}-tag {
     margin-left: 10px;
   }
 
diff --git a/website/demo-styles/time-picker.scss b/website/demo-styles/time-picker.scss
index f3c19a6acc..e016acd94d 100644
--- a/website/demo-styles/time-picker.scss
+++ b/website/demo-styles/time-picker.scss
@@ -1,5 +1,5 @@
 .demo-block {
-  .el-date-editor + .el-date-editor {
+  .#{$namespace}-date-editor + .#{$namespace}-date-editor {
     margin-left: 10px;
   }
 }
diff --git a/website/demo-styles/timeline.scss b/website/demo-styles/timeline.scss
index 0a50028f02..e874b38f84 100644
--- a/website/demo-styles/timeline.scss
+++ b/website/demo-styles/timeline.scss
@@ -1,6 +1,6 @@
 .demo-timeline .source .radio {
   margin-bottom: 20px;
 }
-.demo-timeline .source .radio .el-radio-group {
+.demo-timeline .source .radio .#{$namespace}-radio-group {
   margin-left: 20px;
 }
diff --git a/website/demo-styles/tooltip.scss b/website/demo-styles/tooltip.scss
index 74e3e238b7..04744074c9 100644
--- a/website/demo-styles/tooltip.scss
+++ b/website/demo-styles/tooltip.scss
@@ -1,5 +1,5 @@
 .demo-tooltip {
-  .el-tooltip + .el-tooltip {
+  .#{$namespace}-tooltip + .#{$namespace}-tooltip {
     margin-left: 15px;
   }
   .box {
@@ -28,11 +28,11 @@
       margin: 4px;
     }
 
-    .left .el-tooltip__popper,
-    .right .el-tooltip__popper {
+    .left .#{$namespace}-tooltip__popper,
+    .right .#{$namespace}-tooltip__popper {
       padding: 8px 10px;
     }
-    .el-tooltip {
+    .#{$namespace}-tooltip {
       margin-left: 0;
     }
   }
diff --git a/website/demo-styles/upload.scss b/website/demo-styles/upload.scss
index e7f8a941bb..ddc5019480 100644
--- a/website/demo-styles/upload.scss
+++ b/website/demo-styles/upload.scss
@@ -10,7 +10,7 @@
     width: 360px;
   }
   .avatar-uploader {
-    .el-upload {
+    .#{$namespace}-upload {
       border: 1px dashed #d9d9d9;
       border-radius: 6px;
       cursor: pointer;