From 61af36635d554c2b19047505e37793b4231df24a Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Fri, 8 Dec 2023 14:05:44 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20fix:=20=E5=85=BC=E5=AE=B9=20createInsta?=
 =?UTF-8?q?nce=20=E6=97=B6=E8=87=AA=E5=AE=9A=E4=B9=89=20prefixCls=20?=
 =?UTF-8?q?=E7=9A=84=E5=9C=BA=E6=99=AF=20(#126)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/factories/createUseTheme.ts               |  4 +-
 .../createInstance.test.tsx.snap              | 45 +++++++++++++++++++
 tests/functions/createInstance.test.tsx       | 42 ++++++++++++++++-
 3 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 tests/functions/__snapshots__/createInstance.test.tsx.snap

diff --git a/src/factories/createUseTheme.ts b/src/factories/createUseTheme.ts
index e276bb54..bda0f676 100644
--- a/src/factories/createUseTheme.ts
+++ b/src/factories/createUseTheme.ts
@@ -27,7 +27,9 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => {
   const { iconPrefixCls, getPrefixCls } = useContext(ConfigProvider.ConfigContext);
 
   const antdPrefixCls = getPrefixCls();
-  const prefixCls = outPrefixCls ?? antdPrefixCls;
+  // 只有当用户在 createInstance 中传入与 ant 不一样的 prefixCls 时，才会使用用户的 prefixCls
+  // 否则其他情况下都优先使用 antd 的 prefixCls
+  const prefixCls = outPrefixCls && outPrefixCls !== 'ant' ? outPrefixCls : antdPrefixCls;
 
   const initTheme = useMemo<Theme>(
     () => ({
diff --git a/tests/functions/__snapshots__/createInstance.test.tsx.snap b/tests/functions/__snapshots__/createInstance.test.tsx.snap
new file mode 100644
index 00000000..55b4569d
--- /dev/null
+++ b/tests/functions/__snapshots__/createInstance.test.tsx.snap
@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`createInstance > 自定义 prefixCls 时，会采用 instance 的 prefixCls 而不是 CP 的prefixCls 1`] = `
+.emotion-0.test-btn {
+  background: lightsteelblue;
+  border: none;
+  color: royalblue;
+}
+
+.emotion-0 .cpicon {
+  color: darkblue;
+}
+
+<button
+  class="cp-btn cp-btn-default emotion-0"
+  type="button"
+>
+  <span
+    class="cp-btn-icon"
+  >
+    <span
+      aria-label="smile"
+      class="cpicon cpicon-smile"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="smile"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+        />
+      </svg>
+    </span>
+  </span>
+  <span>
+    CP Button
+  </span>
+</button>
+`;
diff --git a/tests/functions/createInstance.test.tsx b/tests/functions/createInstance.test.tsx
index 9ac5ef85..097d8918 100644
--- a/tests/functions/createInstance.test.tsx
+++ b/tests/functions/createInstance.test.tsx
@@ -1,5 +1,8 @@
-import { renderHook } from '@testing-library/react';
+import { SmileOutlined } from '@ant-design/icons';
+import { render, renderHook } from '@testing-library/react';
+import { Button, ConfigProvider } from 'antd';
 import { createInstance } from 'antd-style';
+import { PropsWithChildren } from 'react';
 
 interface TestCustomToken {
   x?: string;
@@ -32,6 +35,43 @@ describe('createInstance', () => {
     expect(result.current.prefixCls).toEqual('test');
   });
 
+  it('自定义 prefixCls 时，会采用 instance 的 prefixCls 而不是 CP 的prefixCls', () => {
+    const useStyles = instance.createStyles(({ css, prefixCls, iconPrefixCls }) => {
+      return {
+        button: css`
+          &.${prefixCls}-btn {
+            background: lightsteelblue;
+            border: none;
+            color: royalblue;
+          }
+
+          .${iconPrefixCls} {
+            color: darkblue;
+          }
+        `,
+      };
+    });
+
+    const App = () => {
+      const { styles } = useStyles();
+
+      return (
+        <Button className={styles.button} icon={<SmileOutlined />}>
+          CP Button
+        </Button>
+      );
+    };
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <ConfigProvider prefixCls={'cp'} iconPrefixCls={'cpicon'}>
+        {children}
+      </ConfigProvider>
+    );
+
+    const { container } = render(<App />, { wrapper });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it('useTheme 拿到的 token 里有 x 为 123', () => {
     const { result } = renderHook(instance.useTheme);