fix!(extractStyle): close by default

markthree · markthree · commit 48db824c47d7 · 2024-01-10T14:09:52.000+08:00
diff --git a/README.md b/README.md
@@ -69,11 +69,9 @@ const handleMessage = () => {
 }
 </script>
 <template>
-  <a-extract-style>
-     <a-button @click="handleMessage">
-      button
-    </a-button>
-  </a-extract-style>
+  <a-button @click="handleMessage">
+    button
+  </a-button>
 </template>
 ```
 Reference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.
@@ -105,10 +103,12 @@ If there are components that are not imported automatically from @ant-design/ico
 
 * Type: `boolean`
 
-Extract css on demand, start by default
+> Solve page css flicker problem
+
+Extracts and injects css on demand, defaults to false
 
 ```vue
-<!-- If launched, we can wrap the component or page in the app.vue outermost layer -->
+<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
 <template>
   <a-extract-style>
     <!-- Your page or component -->
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  antd: {},
+  antd: {
+    extractStyle: true
+  },
   imports:{
     autoImport:true
   },
diff --git a/src/config.ts b/src/config.ts
@@ -15,5 +15,5 @@ export const defaults:Options = {
   components: allComponents,
   icons: allIcons,
   imports: allImports,
-  extractStyle: true
+  extractStyle: false
 }

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,5 @@ export const defaults:Options = {`
`15`	`15`	`components: allComponents,`
`16`	`16`	`icons: allIcons,`
`17`	`17`	`imports: allImports,`
`18`		`- extractStyle: true`
	`18`	`+ extractStyle: false`
`19`	`19`	`}`