🐛 fix: 兼容 createInstance 时自定义 prefixCls 的场景 (#126)

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>(
     () => ({

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>
+`;

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);