diff --git a/package.json b/package.json
index 13ccbc25d..0a754d8d5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,4 @@
 {
-  "type": "module",
   "name": "naive-ui",
   "version": "1.4.0",
   "description": "A Vue UI Framework. Caring About Styles, Themed, Batteries Included, Not Rather Slow.",
diff --git a/src/_mixins/usecssr.js b/src/_mixins/usecssr.js
new file mode 100644
index 000000000..40b60d5eb
--- /dev/null
+++ b/src/_mixins/usecssr.js
@@ -0,0 +1,63 @@
+const styleMountStatus = {}
+
+function isStyleMounted (componentName, renderedTheme) {
+  const componentStyleMountStatus = styleMountStatus[componentName]
+  if (!componentStyleMountStatus) return false
+  if (!componentStyleMountStatus[renderedTheme]) return false
+  return true
+}
+
+function markStyleMounted (componentName, renderedTheme) {
+  if (!styleMountStatus[componentName]) {
+    styleMountStatus[componentName] = {
+      [renderedTheme]: true
+    }
+  } else if (!styleMountStatus[componentName][renderedTheme]) {
+    styleMountStatus[componentName][renderedTheme] = true
+  }
+}
+
+function getThemeVariables (naive, themeName) {
+  const themes = naive._themes
+  const theme = themes[themeName]
+  return theme.base
+}
+
+function prepareTheme (instance, theme, CNode) {
+  const naive = instance.$naive
+  const options = instance.$options
+  const {
+    fallbackTheme,
+    _themes
+  } = naive
+  const renderedTheme = theme || fallbackTheme
+  if (isStyleMounted(options.name, renderedTheme)) return
+  const cssrPropsGetter = _themes[renderedTheme][options.name]
+  if (process.env.NODE_ENV !== 'production' && !cssrPropsGetter) {
+    console.error(`[naive-ui/mixins/usecssr]: ${options.name}'s style not found`)
+  }
+  const themeVariables = getThemeVariables(naive, renderedTheme)
+  const componentCssrProps = Object.assign(
+    {},
+    cssrPropsGetter.cssrProps(themeVariables),
+    { theme: renderedTheme, fallbackTheme }
+  )
+  CNode.mount({
+    target: options.name,
+    props: componentCssrProps
+  })
+  markStyleMounted(options.name, renderedTheme)
+}
+
+export default function (CNode) {
+  return {
+    beforeMount () {
+      prepareTheme(this, this.syntheticTheme || null, CNode)
+    },
+    watch: {
+      syntheticTheme (value) {
+        prepareTheme(this, value, CNode)
+      }
+    }
+  }
+}
diff --git a/src/styles/utils/create-component-base.js b/src/styles/utils/create-component-base.js
index ee1098959..7a7d3713b 100644
--- a/src/styles/utils/create-component-base.js
+++ b/src/styles/utils/create-component-base.js
@@ -1,15 +1,12 @@
 export default function createBaseComponent (component) {
-  let cachedStyleScheme = null
+  let cachedCssrProps = null
   return {
     getDerivedVariables: component.getDerivedVariables,
-    get styleScheme () {
-      if (!cachedStyleScheme) {
-        cachedStyleScheme = this.createStyleScheme({
-          base: this.theme.base,
-          derived: this.theme.derived
-        })
+    cssrProps (themeVariables) {
+      if (!cachedCssrProps) {
+        cachedCssrProps = this.getDerivedVariables(themeVariables)
       }
-      return cachedStyleScheme
+      return cachedCssrProps
     },
     customize (options = {}) {
       return Object.assign({}, this.styleScheme, options)