diff --git a/docs/docs/docs/max/styled-components.md b/docs/docs/docs/max/styled-components.md
index 0bb77889390c..a37cb5dda7af 100644
--- a/docs/docs/docs/max/styled-components.md
+++ b/docs/docs/docs/max/styled-components.md
@@ -64,7 +64,7 @@ export default {
 比如：
 
 ```ts
-import {createGlobalStyle} from "umi";
+import { createGlobalStyle } from "umi";
 
 export const styledComponents = {
   GlobalStyle: createGlobalStyle`
diff --git a/packages/plugins/src/styled-components.ts b/packages/plugins/src/styled-components.ts
index fbcacfe3a046..f9b7d96d07b9 100644
--- a/packages/plugins/src/styled-components.ts
+++ b/packages/plugins/src/styled-components.ts
@@ -55,7 +55,11 @@ export { styled, ThemeProvider, createGlobalStyle, css, keyframes, StyleSheetMan
       content: `
 ${styledComponentsRuntimeCode}
 export function rootContainer(container) {
-  const globalStyle = styledComponentsConfig.GlobalStyle ? <styledComponentsConfig.GlobalStyle /> : null;
+  const scConfig =
+    typeof styledComponentsConfig === 'function'
+      ? styledComponentsConfig()
+      : styledComponentsConfig;
+  const globalStyle = scConfig.GlobalStyle ? <scConfig.GlobalStyle /> : null;
   return (
     <>
       {globalStyle}