diff --git a/src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js b/src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js
index b93443eb4..825ec0087 100644
--- a/src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js
+++ b/src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js
@@ -1,6 +1,6 @@
-import { h, Transition, TransitionGroup } from 'vue'
+import { h, Transition, TransitionGroup, defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'FadeInExpandTransition',
   props: {
     appear: {
@@ -96,4 +96,4 @@ export default {
       }
     )
   }
-}
+})
diff --git a/src/_base/focus-detector/src/FocusDetector.vue b/src/_base/focus-detector/src/FocusDetector.vue
index bc8b6da72..88f8299ce 100644
--- a/src/_base/focus-detector/src/FocusDetector.vue
+++ b/src/_base/focus-detector/src/FocusDetector.vue
@@ -8,7 +8,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   props: {
     onFocus: {
       type: Function,
@@ -29,5 +31,5 @@ export default {
       if (onBlur) onBlur(e)
     }
   }
-}
+})
 </script>
diff --git a/src/_base/icon-switch-transition/src/IconSwitchTransition.js b/src/_base/icon-switch-transition/src/IconSwitchTransition.js
index f72d69584..fc2c0f9c1 100644
--- a/src/_base/icon-switch-transition/src/IconSwitchTransition.js
+++ b/src/_base/icon-switch-transition/src/IconSwitchTransition.js
@@ -1,6 +1,6 @@
-import { h, nextTick, Transition } from 'vue'
+import { h, nextTick, Transition, defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'NBaseIconSwitchTransition',
   data () {
     return {
@@ -22,4 +22,4 @@ export default {
       this.$slots
     )
   }
-}
+})
diff --git a/src/_base/loading/src/Loading.vue b/src/_base/loading/src/Loading.vue
index 2366e6a31..88814d72d 100644
--- a/src/_base/loading/src/Loading.vue
+++ b/src/_base/loading/src/Loading.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    :class="{ [`n-${theme}-theme`]: theme }"
     class="n-base-loading"
     :style="{
       stroke
@@ -32,16 +31,16 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import { NIconSwitchTransition } from '../../../_base'
-import { withCssr } from '../../../_mixins'
-import styles from './styles/'
+import { useStyle } from '../../../_mixins'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'BaseLoading',
   components: {
     NIconSwitchTransition
   },
-  mixins: [withCssr(styles)],
   props: {
     scale: {
       type: Number,
@@ -51,10 +50,6 @@ export default {
       type: Number,
       default: 100
     },
-    theme: {
-      type: String,
-      default: undefined
-    },
     strokeWidth: {
       type: Number,
       default: 28
@@ -67,6 +62,9 @@ export default {
       type: Boolean,
       default: true
     }
+  },
+  setup () {
+    useStyle('BaseLoading', style)
   }
-}
+})
 </script>
diff --git a/src/_base/loading/src/styles/index.cssr.js b/src/_base/loading/src/styles/index.cssr.js
new file mode 100644
index 000000000..2219c84c7
--- /dev/null
+++ b/src/_base/loading/src/styles/index.cssr.js
@@ -0,0 +1,65 @@
+import { c, cB, cE } from '../../../../_utils/cssr'
+import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
+
+const dashOffset = 500
+
+export default c([
+  cB('base-loading', `
+    position: relative;
+    line-height: 0;
+    width: 1em;
+    height: 1em;
+  `, [
+    cE('placeholder', {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translateX(-50%) translateY(-50%)'
+    }, [
+      iconSwitchTransition({
+        left: '50%',
+        top: '50%',
+        originalTransform: 'translateX(-50%) translateY(-50%)'
+      })
+    ]),
+    cE('icon', [
+      iconSwitchTransition()
+    ]),
+    cB('base-loading-circular', `
+      stroke: currentColor;
+      height: 100%;
+      width: 100%;
+      animation: n-base-loading-rotate 1.5s linear infinite;
+      transform-origin: center;
+    `, [
+      cB('base-loading-circular-path', `
+        transform-origin: center;
+        animation: n-base-loading-dash 1.5s ease-in-out infinite;
+        stroke-dasharray: ${dashOffset};
+        stroke-dashoffset: 0;
+        stroke-linecap: round;
+      `)
+    ])
+  ]),
+  c('@keyframes n-base-loading-rotate', `
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(270deg);
+    }
+  `),
+  c('@keyframes n-base-loading-dash', `
+    0% {
+      stroke-dashoffset: ${dashOffset};
+    }
+    50% {
+      stroke-dashoffset: ${dashOffset / 4};
+      transform: rotate(135deg);
+    }
+    100% {
+      stroke-dashoffset: ${dashOffset};
+      transform: rotate(450deg);
+    }
+  `)
+])
diff --git a/src/_base/loading/src/styles/index.js b/src/_base/loading/src/styles/index.js
deleted file mode 100644
index d502e3f3f..000000000
--- a/src/_base/loading/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr'
-
-export default [
-  {
-    key: 'theme',
-    watch: ['theme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/_base/loading/src/styles/themed-base.cssr.js b/src/_base/loading/src/styles/themed-base.cssr.js
deleted file mode 100644
index b6913e879..000000000
--- a/src/_base/loading/src/styles/themed-base.cssr.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { cTB, c, cB, cE } from '../../../../_utils/cssr'
-import iconSwitchTransition from '../../../../_styles/transitions/icon-switch'
-
-const dashOffset = 500
-
-export default c([
-  ({ props }) => {
-    return [
-      cTB('base-loading', `
-        position: relative;
-        line-height: 0;
-        width: 1em;
-        height: 1em;
-      `, [
-        cE('placeholder', {
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)'
-        }, [
-          iconSwitchTransition({
-            left: '50%',
-            top: '50%',
-            originalTransform: 'translateX(-50%) translateY(-50%)'
-          })
-        ]),
-        cE('icon', [
-          iconSwitchTransition()
-        ]),
-        cB('base-loading-circular', `
-          stroke: currentColor;
-          height: 100%;
-          width: 100%;
-          animation: n-base-loading-rotate 1.5s linear infinite;
-          transform-origin: center;
-        `, [
-          cB('base-loading-circular-path', `
-            transform-origin: center;
-            animation: n-base-loading-dash 1.5s ease-in-out infinite;
-            stroke-dasharray: ${dashOffset};
-            stroke-dashoffset: 0;
-            stroke-linecap: round;
-          `)
-        ])
-      ]),
-      c('@keyframes n-base-loading-rotate', `
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(270deg);
-        }
-      `),
-      c('@keyframes n-base-loading-dash', `
-        0% {
-          stroke-dashoffset: ${dashOffset};
-        }
-        50% {
-          stroke-dashoffset: ${dashOffset / 4};
-          transform: rotate(135deg);
-        }
-        100% {
-          stroke-dashoffset: ${dashOffset};
-          transform: rotate(450deg);
-        }
-      `)
-    ]
-  }
-])
diff --git a/src/_base/loading/styles/dark.js b/src/_base/loading/styles/dark.js
deleted file mode 100644
index 919acd087..000000000
--- a/src/_base/loading/styles/dark.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import create from '../../../_styles/utils/create-component-base'
-
-export default create({
-  name: 'BaseLoading',
-  theme: 'dark',
-  getLocalVars (vars) {
-    return {
-      color: vars.primaryColor
-    }
-  }
-})
diff --git a/src/_base/loading/styles/index.js b/src/_base/loading/styles/index.js
deleted file mode 100644
index 218576588..000000000
--- a/src/_base/loading/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as baseLoadingLight } from './light'
-export { default as baseLoadingDark } from './dark'
diff --git a/src/_base/loading/styles/light.js b/src/_base/loading/styles/light.js
deleted file mode 100644
index 8ba71fa43..000000000
--- a/src/_base/loading/styles/light.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import create from '../../../_styles/utils/create-component-base'
-
-export default create({
-  name: 'BaseLoading',
-  theme: 'light',
-  getLocalVars (vars) {
-    return {
-      color: vars.primaryColor
-    }
-  }
-})
diff --git a/src/_base/slot-machine/src/SlotMachine.vue b/src/_base/slot-machine/src/SlotMachine.vue
index 815ab5c21..031e0232a 100644
--- a/src/_base/slot-machine/src/SlotMachine.vue
+++ b/src/_base/slot-machine/src/SlotMachine.vue
@@ -1,5 +1,5 @@
 <template>
-  <span v-if="valueIsNumber" class="n-base-slot-machine">
+  <span v-if="valueIsNumber" class="n-base-slot-machine" :style="cssVars">
     <transition-group name="n-fade-up-width-expand-transition" tag="span">
       <slot-machine-number
         v-for="(number, i) in numbers"
@@ -19,23 +19,21 @@
 </template>
 
 <script>
+import { defineComponent, computed } from 'vue'
 import { NFadeInExpandTransition } from '../../../_base'
+import { useTheme } from '../../../_mixins'
+import { baseSlotMachineLight } from '../styles'
 import SlotMachineNumber from './SlotMachineNumber.vue'
-import { withCssr } from '../../../_mixins'
-import styles from './styles/index.js'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'BaseSlotMachine',
   components: {
     NFadeInExpandTransition,
     SlotMachineNumber
   },
-  mixins: [withCssr(styles)],
   props: {
-    theme: {
-      type: String,
-      default: undefined
-    },
+    ...useTheme.props,
     value: {
       type: [Number, String],
       default: 0
@@ -49,6 +47,25 @@ export default {
       required: true
     }
   },
+  setup (props) {
+    const themeRef = useTheme(
+      'BaseSlotMachine',
+      'BaseSlotMachine',
+      style,
+      baseSlotMachineLight,
+      props
+    )
+    return {
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseOut }
+        } = themeRef.value
+        return {
+          '--bezier-ease-out': cubicBezierEaseOut
+        }
+      })
+    }
+  },
   data () {
     return {
       oldValue: null,
@@ -84,5 +101,5 @@ export default {
       this.oldValue = oldValue
     }
   }
-}
+})
 </script>
diff --git a/src/_base/slot-machine/src/styles/base.cssr.js b/src/_base/slot-machine/src/styles/base.cssr.js
deleted file mode 100644
index 25511a72e..000000000
--- a/src/_base/slot-machine/src/styles/base.cssr.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { c, cB, cE, cM } from '../../../../_utils/cssr'
-import fadeInWidthExpandTransition from '../../../../_styles/transitions/fade-in-width-expand'
-import fadeUpWidthExpandTransition from '../../../../_styles/transitions/fade-up-width-expand'
-
-export default c([
-  ({ props }) => [
-    c('@keyframes n-base-slot-machine-fade-up-in', {
-      raw: `
-        from {
-          transform: translateY(60%);
-          opacity: 0;
-        }
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      `
-    }),
-    c('@keyframes n-base-slot-machine-fade-down-in', {
-      raw: `
-        from {
-          transform: translateY(-60%);
-          opacity: 0;
-        }
-        to {
-          transform: translateY(0);
-          opacity: 1;
-        }
-      `
-    }),
-    c('@keyframes n-base-slot-machine-fade-up-out', {
-      raw: `
-        from {
-          transform: translateY(0%);
-          opacity: 1;
-        }
-        to {
-          transform: translateY(-60%);
-          opacity: 0;
-        }
-      `
-    }),
-    c('@keyframes n-base-slot-machine-fade-down-out', {
-      raw: `
-        from {
-          transform: translateY(0%);
-          opacity: 1;
-        }
-        to {
-          transform: translateY(60%);
-          opacity: 0;
-        }
-      `
-    }),
-    cB('base-slot-machine', {
-      raw: `
-        overflow: hidden;
-        white-space: nowrap;
-        display: inline-block;
-        height: 18px;
-        line-height: 18px;
-      `
-    },
-    [
-      cB('base-slot-machine-number', {
-        raw: `
-          display: inline-block;
-          position: relative;
-          height: 18px;
-          width: .6em;
-          max-width: .6em;
-        `
-      }, [
-        fadeUpWidthExpandTransition({ duration: '.2s' }),
-        // use 0s, not 0
-        fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }),
-        cB('base-slot-machine-old-number', {
-          raw: `
-            display: inline-block;
-            opacity: 0;
-            position: absolute;
-            left: 0;
-            right: 0;
-          `
-        }, [
-          cM('top', {
-            transform: 'translateY(-100%)'
-          }),
-          cM('bottom', {
-            transform: 'translateY(100%)'
-          }),
-          cM('down-scroll', {
-            animation: `n-base-slot-machine-fade-down-out .2s ${props.$global.cubicBezierEaseOut}`,
-            animationIterationCount: 1
-          }),
-          cM('up-scroll', {
-            animation: `n-base-slot-machine-fade-up-out .2s ${props.$global.cubicBezierEaseOut}`,
-            animationIterationCount: 1
-          })
-        ]),
-        cB('base-slot-machine-current-number', {
-          raw: `
-            display: inline-block;
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            opacity: 1;
-            transform: translateY(0);
-            width: .6em;
-          `
-        }, [
-          cM('down-scroll', {
-            animation: `n-base-slot-machine-fade-down-in .2s ${props.$global.cubicBezierEaseOut}`,
-            animationIterationCount: 1
-          }),
-          cM('up-scroll', {
-            animation: `n-base-slot-machine-fade-up-in .2s ${props.$global.cubicBezierEaseOut}`,
-            animationIterationCount: 1
-          }),
-          cE('inner', {
-            raw: `
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              width: .6em;
-            `
-          }, [
-            cM('not-number', {
-              raw: `
-                right: unset;
-                left: 0;
-              `
-            })
-          ])
-        ])
-      ])
-    ])
-  ]
-])
diff --git a/src/_base/slot-machine/src/styles/index.cssr.js b/src/_base/slot-machine/src/styles/index.cssr.js
new file mode 100644
index 000000000..b6be6503c
--- /dev/null
+++ b/src/_base/slot-machine/src/styles/index.cssr.js
@@ -0,0 +1,121 @@
+import { c, cB, cE, cM } from '../../../../_utils/cssr'
+import fadeInWidthExpandTransition from '../../../../_styles/transitions/fade-in-width-expand'
+import fadeUpWidthExpandTransition from '../../../../_styles/transitions/fade-up-width-expand'
+
+// vars:
+// --bezier-ease-out
+export default c([
+  c('@keyframes n-base-slot-machine-fade-up-in', `
+    from {
+      transform: translateY(60%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  `),
+  c('@keyframes n-base-slot-machine-fade-down-in', `
+    from {
+      transform: translateY(-60%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  `),
+  c('@keyframes n-base-slot-machine-fade-up-out', `
+    from {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(-60%);
+      opacity: 0;
+    }
+  `),
+  c('@keyframes n-base-slot-machine-fade-down-out', `
+    from {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(60%);
+      opacity: 0;
+    }
+  `),
+  cB('base-slot-machine', `
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    height: 18px;
+    line-height: 18px;
+  `, [
+    cB('base-slot-machine-number', `
+      display: inline-block;
+      position: relative;
+      height: 18px;
+      width: .6em;
+      max-width: .6em;
+    `, [
+      fadeUpWidthExpandTransition({ duration: '.2s' }),
+      // use 0s, not 0
+      fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }),
+      cB('base-slot-machine-old-number', `
+        display: inline-block;
+        opacity: 0;
+        position: absolute;
+        left: 0;
+        right: 0;
+      `, [
+        cM('top', {
+          transform: 'translateY(-100%)'
+        }),
+        cM('bottom', {
+          transform: 'translateY(100%)'
+        }),
+        cM('down-scroll', {
+          animation: 'n-base-slot-machine-fade-down-out .2s var(--bezier-ease-out)',
+          animationIterationCount: 1
+        }),
+        cM('up-scroll', {
+          animation: 'n-base-slot-machine-fade-up-out .2s var(--bezier-ease-out)',
+          animationIterationCount: 1
+        })
+      ]),
+      cB('base-slot-machine-current-number', `
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        opacity: 1;
+        transform: translateY(0);
+        width: .6em;
+      `, [
+        cM('down-scroll', {
+          animation: 'n-base-slot-machine-fade-down-in .2s var(--bezier-ease-out)',
+          animationIterationCount: 1
+        }),
+        cM('up-scroll', {
+          animation: 'n-base-slot-machine-fade-up-in .2s var(--bezier-ease-out)',
+          animationIterationCount: 1
+        }),
+        cE('inner', `
+            display: inline-block;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: .6em;
+          `, [
+          cM('not-number', `
+            right: unset;
+            left: 0;
+          `)
+        ])
+      ])
+    ])
+  ])
+])
diff --git a/src/_base/slot-machine/src/styles/index.js b/src/_base/slot-machine/src/styles/index.js
deleted file mode 100644
index f31470811..000000000
--- a/src/_base/slot-machine/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './base.cssr.js'
-
-export default [
-  {
-    key: 'theme',
-    watch: ['theme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/_base/slot-machine/styles/dark.js b/src/_base/slot-machine/styles/dark.js
index ab152ea85..cba4ffa97 100644
--- a/src/_base/slot-machine/styles/dark.js
+++ b/src/_base/slot-machine/styles/dark.js
@@ -1,10 +1,6 @@
-import create from '../../../_styles/utils/create-component-base'
+import { commonDark } from '../../../_styles/new-common'
 
-// no style, placeholder
-export default create({
-  theme: 'dark',
+export default {
   name: 'BaseSlotMachine',
-  getLocalVars (vars) {
-    return {}
-  }
-})
+  common: commonDark
+}
diff --git a/src/_base/slot-machine/styles/index.js b/src/_base/slot-machine/styles/index.js
index fa91c1f58..98b01a251 100644
--- a/src/_base/slot-machine/styles/index.js
+++ b/src/_base/slot-machine/styles/index.js
@@ -1,2 +1,2 @@
-export { default as baseSlotMachineLight } from './light'
-export { default as baseSlotMachineDark } from './dark'
+export { default as baseSelectionLight } from './light'
+export { default as baseSelectionDark } from './dark'
diff --git a/src/_base/slot-machine/styles/light.js b/src/_base/slot-machine/styles/light.js
index 2cbd2c16e..ac2750408 100644
--- a/src/_base/slot-machine/styles/light.js
+++ b/src/_base/slot-machine/styles/light.js
@@ -1,10 +1,6 @@
-import create from '../../../_styles/utils/create-component-base'
+import { commonLight } from '../../../_styles/new-common'
 
-// no style, placeholder
-export default create({
-  theme: 'light',
+export default {
   name: 'BaseSlotMachine',
-  getLocalVars (vars) {
-    return {}
-  }
-})
+  common: commonLight
+}
diff --git a/src/_base/wave/src/Wave.vue b/src/_base/wave/src/Wave.vue
index 1e655735e..832a81b93 100644
--- a/src/_base/wave/src/Wave.vue
+++ b/src/_base/wave/src/Wave.vue
@@ -8,17 +8,14 @@
 </template>
 
 <script>
-import { withCssr } from '../../../_mixins'
-import styles from './styles/index.js'
+import { defineComponent } from 'vue'
+import { useStyle } from '../../../_mixins'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'BaseWave',
-  mixins: [withCssr(styles)],
-  props: {
-    theme: {
-      type: String,
-      default: undefined
-    }
+  setup () {
+    useStyle('BaseWave', style)
   },
   data () {
     return {
@@ -50,5 +47,5 @@ export default {
       })
     }
   }
-}
+})
 </script>
diff --git a/src/_base/wave/src/styles/base.cssr.js b/src/_base/wave/src/styles/base.cssr.js
deleted file mode 100644
index b49044ac8..000000000
--- a/src/_base/wave/src/styles/base.cssr.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cB, c } from '../../../../_utils/cssr/index.js'
-
-export default c([
-  () => cB('base-wave', {
-    raw: `
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      border-radius: inherit;
-    `
-  })
-])
diff --git a/src/_base/wave/src/styles/index.cssr.js b/src/_base/wave/src/styles/index.cssr.js
new file mode 100644
index 000000000..4577d39bc
--- /dev/null
+++ b/src/_base/wave/src/styles/index.cssr.js
@@ -0,0 +1,10 @@
+import { cB } from '../../../../_utils/cssr/index.js'
+
+export default cB('base-wave', `
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: inherit;
+`)
diff --git a/src/_base/wave/src/styles/index.js b/src/_base/wave/src/styles/index.js
deleted file mode 100644
index f31470811..000000000
--- a/src/_base/wave/src/styles/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import baseStyle from './base.cssr.js'
-
-export default [
-  {
-    key: 'theme',
-    watch: ['theme'],
-    CNode: baseStyle
-  }
-]
diff --git a/src/_base/wave/styles/dark.js b/src/_base/wave/styles/dark.js
deleted file mode 100644
index ead5a736d..000000000
--- a/src/_base/wave/styles/dark.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import create from '../../../_styles/utils/create-component-base'
-
-export default create({
-  name: 'BaseWave',
-  theme: 'dark',
-  getLocalVars () {
-    return {}
-  }
-})
diff --git a/src/_base/wave/styles/index.js b/src/_base/wave/styles/index.js
deleted file mode 100644
index 6b73259c5..000000000
--- a/src/_base/wave/styles/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as baseWaveLight } from './light'
-export { default as baseWaveDark } from './dark'
diff --git a/src/_base/wave/styles/light.js b/src/_base/wave/styles/light.js
deleted file mode 100644
index ddbb409b9..000000000
--- a/src/_base/wave/styles/light.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import create from '../../../_styles/utils/create-component-base'
-
-export default create({
-  name: 'BaseWave',
-  theme: 'light',
-  getLocalVars () {
-    return {}
-  }
-})
diff --git a/src/_mixins/index.js b/src/_mixins/index.js
index f3a0f5616..958a7eb5a 100644
--- a/src/_mixins/index.js
+++ b/src/_mixins/index.js
@@ -8,3 +8,4 @@ export { default as useFormItem } from './use-form-item'
 export { default as useTheme } from './use-theme'
 export { default as useConfig } from './use-config'
 export { default as useLocale } from './use-locale'
+export { default as useStyle } from './use-style'
diff --git a/src/_mixins/use-style.js b/src/_mixins/use-style.js
new file mode 100644
index 000000000..1771371fa
--- /dev/null
+++ b/src/_mixins/use-style.js
@@ -0,0 +1,9 @@
+import { onBeforeMount } from 'vue'
+
+export default function useStyle (mountId, style) {
+  onBeforeMount(() => {
+    style.mount({
+      id: mountId
+    })
+  })
+}
diff --git a/src/badge/styles/dark.js b/src/badge/styles/dark.js
index 059c22751..d76c83417 100644
--- a/src/badge/styles/dark.js
+++ b/src/badge/styles/dark.js
@@ -1,11 +1,11 @@
-import { baseDark } from '../../_styles/base'
 import { baseSlotMachineDark } from '../../_base/slot-machine/styles'
-import { baseWaveDark } from '../../_base/wave/styles'
 import { commonDark } from '../../_styles/new-common'
 
 export default {
   common: commonDark,
-  peers: [baseDark, baseWaveDark, baseSlotMachineDark],
+  peers: {
+    BaseSlotMachine: baseSlotMachineDark
+  },
   self (vars) {
     const {
       errorColorSuppl,
diff --git a/src/badge/styles/light.js b/src/badge/styles/light.js
index 8438d4b3b..a0bb922cd 100644
--- a/src/badge/styles/light.js
+++ b/src/badge/styles/light.js
@@ -1,11 +1,11 @@
-import { baseLight } from '../../_styles/base'
 import { baseSlotMachineLight } from '../../_base/slot-machine/styles'
-import { baseWaveLight } from '../../_base/wave/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
   common: commonLight,
-  peers: [baseLight, baseWaveLight, baseSlotMachineLight],
+  peers: {
+    BaseSlotMachine: baseSlotMachineLight
+  },
   self (vars) {
     const { errorColor, infoColor, successColor, warningColor } = vars
     return {
diff --git a/src/cascader/styles/light.js b/src/cascader/styles/light.js
index d85963390..9a1598e03 100644
--- a/src/cascader/styles/light.js
+++ b/src/cascader/styles/light.js
@@ -1,5 +1,4 @@
 import { baseMenuMaskLight } from '../../_base/menu-mask/styles'
-import { baseLoadingLight } from '../../_base/loading/styles'
 import { baseSelectionLight } from '../../_base/selection/styles'
 import { baseSelectMenuLight } from '../../_base/select-menu/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
@@ -12,7 +11,6 @@ export default {
     BaseMenuMask: baseMenuMaskLight,
     BaseSelectMenu: baseSelectMenuLight,
     BaseSelection: baseSelectionLight,
-    BaseLoading: baseLoadingLight,
     Scrollbar: scrollbarLight,
     Checkbox: checkboxLight
   },
diff --git a/src/log/styles/light.js b/src/log/styles/light.js
index 56ed46bd4..007419be1 100644
--- a/src/log/styles/light.js
+++ b/src/log/styles/light.js
@@ -1,4 +1,3 @@
-import { baseLoadingLight } from '../../_base/loading/styles'
 import { scrollbarLight } from '../../scrollbar/styles'
 import { commonLight } from '../../_styles/new-common'
 import { codeLight } from '../../code/styles'
@@ -7,7 +6,6 @@ export default {
   name: 'Log',
   common: commonLight,
   peers: {
-    BaseLoading: baseLoadingLight,
     Scrollbar: scrollbarLight,
     Code: codeLight
   },
diff --git a/src/spin/styles/light.js b/src/spin/styles/light.js
index 954b0ba07..1a771c5e0 100644
--- a/src/spin/styles/light.js
+++ b/src/spin/styles/light.js
@@ -1,12 +1,8 @@
-import { baseLoadingLight } from '../../_base/loading/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
   name: 'Spin',
   common: commonLight,
-  peers: {
-    BaseLoading: baseLoadingLight
-  },
   self (vars) {
     const {
       opacityDisabled,
diff --git a/src/styles.js b/src/styles.js
index 98a6aabad..9d9f37c98 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -3,7 +3,7 @@ export {
   baseClearButtonDark,
   baseClearButtonLight
 } from './_base/clear-button/styles'
-export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
+// export { baseLoadingDark, baseLoadingLight } from './_base/loading/styles'
 export { baseMenuMaskDark, baseMenuMaskLight } from './_base/menu-mask/styles'
 export { baseSelectionDark, baseSelectionLight } from './_base/selection/styles'
 export {
@@ -14,7 +14,7 @@ export {
   baseSlotMachineDark,
   baseSlotMachineLight
 } from './_base/slot-machine/styles'
-export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
+// export { baseWaveDark, baseWaveLight } from './_base/wave/styles'
 // exposed style
 export { baseDark, baseLight } from './_styles/base'
 // export { affixDark, affixLight } from './affix/styles'
diff --git a/src/tree/styles/light.js b/src/tree/styles/light.js
index fb866b6c5..24d1ee1ab 100644
--- a/src/tree/styles/light.js
+++ b/src/tree/styles/light.js
@@ -1,7 +1,6 @@
 import { changeColor } from 'seemly'
 import { iconLight } from '../../icon/styles'
 import { checkboxLight } from '../../checkbox/styles'
-import { baseLoadingLight } from '../../_base/loading/styles'
 import { commonLight } from '../../_styles/new-common'
 
 export default {
@@ -9,8 +8,7 @@ export default {
   common: commonLight,
   peers: {
     Icon: iconLight,
-    Checkbox: checkboxLight,
-    BaseLoading: baseLoadingLight
+    Checkbox: checkboxLight
   },
   self (vars) {
     const {