diff --git a/packages/canvas/common/src/utils.js b/packages/canvas/common/src/utils.js
index b6ad2502a..2b3c05b38 100644
--- a/packages/canvas/common/src/utils.js
+++ b/packages/canvas/common/src/utils.js
@@ -62,7 +62,7 @@ export const copyObject = (node) => {
  */
 export const dynamicImportComponents = async ({ package: pkg, script, components }) => {
   if (!script) return
-  const href = window.parent.location.href || location.href; // 这里要取父窗口的地址，因为在iframe中href是about:srcdoc
+  const href = window.parent.location.href || location.href // 这里要取父窗口的地址，因为在iframe中href是about:srcdoc
   const scriptUrl = script.startsWith('.') ? new URL(script, href).href : script
 
   if (!window.TinyComponentLibs[pkg]) {
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index eae222ed8..65667705e 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -3,7 +3,8 @@
     <div class="line-style">
       <span class="line-text"> 行内样式 </span>
       <div class="inline-style">
-        <code-configurator
+        <component
+          :is="CodeConfigurator"
           v-if="state.lineStyleDisable"
           :buttonShowContent="true"
           :modelValue="state.styleContent"
@@ -12,17 +13,18 @@
           language="css"
           single
           @save="save"
-        />
+        ></component>
         <div v-if="!state.lineStyleDisable">
           <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
         </div>
-        <variable-configurator
+        <component
+          :is="VariableConfigurator"
           ref="bindVariable"
           :model-value="state.bindModelValue"
           name="advance"
           @update:modelValue="setConfig"
         >
-        </variable-configurator>
+        </component>
       </div>
     </div>
   </div>
@@ -67,8 +69,7 @@
 <script>
 import { watch, inject, ref } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
-import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-meta-register'
-import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
+import { useHistory, useCanvas, useProperties, getConfigurator } from '@opentiny/tiny-engine-meta-register'
 import {
   SizeGroup,
   LayoutGroup,
@@ -88,7 +89,6 @@ import { styleStrRemoveRoot } from './js/cssConvert'
 
 export default {
   components: {
-    CodeConfigurator,
     SizeGroup,
     LayoutGroup,
     FlexBox,
@@ -102,11 +102,11 @@ export default {
     ClassNamesContainer,
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
-    TinyInput: Input,
-    VariableConfigurator
+    TinyInput: Input
   },
-  props: {},
   setup() {
+    const CodeConfigurator = getConfigurator('CodeConfigurator')
+    const VariableConfigurator = getConfigurator('VariableConfigurator')
     const styleCategoryGroup = [
       'layout',
       'spacing',
@@ -208,6 +208,8 @@ export default {
     )
 
     return {
+      CodeConfigurator,
+      VariableConfigurator,
       state,
       activeNames,
       CSS_TYPE,