diff --git a/examples/with-styled-components/global.d.ts b/examples/with-styled-components/global.d.ts
new file mode 100644
index 000000000000..bcac06dcb6bf
--- /dev/null
+++ b/examples/with-styled-components/global.d.ts
@@ -0,0 +1,9 @@
+import type { CSSProp } from "styled-components";
+
+interface MyTheme {}
+
+declare module "react" {
+  interface Attributes {
+    css?: CSSProp<MyTheme>
+  }
+}
diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json
index 2d6d2c6190de..99108b26d796 100644
--- a/examples/with-styled-components/package.json
+++ b/examples/with-styled-components/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@umijs/plugins": "workspace:*",
+    "styled-components": "6.1.1",
     "umi": "workspace:*"
   }
 }
diff --git a/examples/with-styled-components/pages/css.tsx b/examples/with-styled-components/pages/css.tsx
new file mode 100644
index 000000000000..dc3ef824c148
--- /dev/null
+++ b/examples/with-styled-components/pages/css.tsx
@@ -0,0 +1,21 @@
+import { css, styled } from 'umi';
+
+const Style = styled.div`
+  ${css`
+    font-size: 18px;
+  `};
+`;
+
+export default function Page() {
+  return (
+    <Style
+      data-color="green"
+      css={`
+        background: papayawhip;
+        color: ${(props: any) => props['data-color']};
+      `}
+    >
+      css style
+    </Style>
+  );
+}
diff --git a/examples/with-styled-components/tsconfig.json b/examples/with-styled-components/tsconfig.json
new file mode 100644
index 000000000000..7fa7937c8056
--- /dev/null
+++ b/examples/with-styled-components/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./.umi/tsconfig.json"
+}
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 8554a2ef92c4..01b78186486e 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -50,7 +50,7 @@
     "react-intl": "3.12.1",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
-    "styled-components": "6.1.0",
+    "styled-components": "6.1.1",
     "tslib": "^2",
     "warning": "^4.0.3"
   },
diff --git a/packages/plugins/src/styled-components.ts b/packages/plugins/src/styled-components.ts
index b88fc203e64c..b123480f2bdc 100644
--- a/packages/plugins/src/styled-components.ts
+++ b/packages/plugins/src/styled-components.ts
@@ -2,6 +2,7 @@ import { lodash, winPath } from '@umijs/utils';
 import { dirname } from 'path';
 import type { IStyleSheetManager } from 'styled-components';
 import { IApi } from 'umi';
+import { resolveProjectDep } from './utils/resolveProjectDep';
 import { withTmpPath } from './utils/withTmpPath';
 
 export default (api: IApi) => {
@@ -20,8 +21,9 @@ export default (api: IApi) => {
   // dev:  displayName
   // prod: minify
   api.modifyConfig((memo) => {
-    // only apply babel plugin in webpack and vite
-    if (!['webpack', 'vite'].includes(api.appData.bundler!)) return memo;
+    if (api.userConfig.mako || process.env.OKAM) {
+      return memo;
+    }
 
     const isProd = api.env === 'production';
     const pluginConfig = {
@@ -56,7 +58,22 @@ export default (api: IApi) => {
     return ['styledComponents'];
   });
 
-  const libPath = dirname(require.resolve('styled-components/package'));
+  const SC_NAME = `styled-components`;
+  let libPath: string;
+  try {
+    libPath =
+      resolveProjectDep({
+        pkg: api.pkg,
+        cwd: api.cwd,
+        dep: SC_NAME,
+      }) || dirname(require.resolve(`${SC_NAME}/package.json`));
+  } catch (e) {}
+
+  api.modifyConfig((memo) => {
+    memo.alias[SC_NAME] = libPath;
+    return memo;
+  });
+
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       path: 'index.tsx',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbb6cafbe91c..9a722314e2c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1532,6 +1532,9 @@ importers:
       '@umijs/plugins':
         specifier: workspace:*
         version: link:../../packages/plugins
+      styled-components:
+        specifier: 6.1.1
+        version: 6.1.1(react-dom@18.1.0)(react@18.1.0)
       umi:
         specifier: workspace:*
         version: link:../../packages/umi
@@ -2336,7 +2339,7 @@ importers:
         version: 1.13.6
       babel-plugin-styled-components:
         specifier: 2.1.4
-        version: 2.1.4(styled-components@6.1.0)
+        version: 2.1.4(styled-components@6.1.1)
       dayjs:
         specifier: ^1.11.7
         version: 1.11.7
@@ -2377,8 +2380,8 @@ importers:
         specifier: ^4.2.1
         version: 4.2.1
       styled-components:
-        specifier: 6.1.0
-        version: 6.1.0(react-dom@18.1.0)(react@18.1.0)
+        specifier: 6.1.1
+        version: 6.1.1(react-dom@18.1.0)(react@18.1.0)
       tslib:
         specifier: ^2
         version: 2.4.1
@@ -21197,7 +21200,7 @@ packages:
       styled-components: 6.0.0-rc.0(react-dom@18.1.0)(react@18.1.0)
     dev: true
 
-  /babel-plugin-styled-components@2.1.4(styled-components@6.1.0):
+  /babel-plugin-styled-components@2.1.4(styled-components@6.1.1):
     resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==}
     peerDependencies:
       styled-components: '>= 2'
@@ -21207,7 +21210,7 @@ packages:
       '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.4.5)
       lodash: 4.17.21
       picomatch: 2.3.1
-      styled-components: 6.1.0(react-dom@18.1.0)(react@18.1.0)
+      styled-components: 6.1.1(react-dom@18.1.0)(react@18.1.0)
     transitivePeerDependencies:
       - '@babel/core'
     dev: false
@@ -45190,8 +45193,8 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /styled-components@6.1.0(react-dom@18.1.0)(react@18.1.0):
-    resolution: {integrity: sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==}
+  /styled-components@6.1.1(react-dom@18.1.0)(react@18.1.0):
+    resolution: {integrity: sha512-cpZZP5RrKRIClBW5Eby4JM1wElLVP4NQrJbJ0h10TidTyJf4SIIwa3zLXOoPb4gJi8MsJ8mjq5mu2IrEhZIAcQ==}
     engines: {node: '>= 16'}
     peerDependencies:
       react: '>= 16.8.0'