🐛 fix: 修正自定义 stylish 的问题

ant-design · Feb 6, 2023 · 61f195e · 61f195e
1 parent cf70f03
commit 61f195e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 10 deletions.
diff --git a/docs/demos/cases/clay/default.tsx b/docs/demos/cases/clay/default.tsx
@@ -10,7 +10,6 @@ const useStyles = createStyles(({ stylish, cx, css, token }) => {
         padding: 24px;
         border-radius: 24px;
         width: 64px;
-        //background: white;
         color: ${token.colorPrimary};
         background: ${token.colorPrimaryBgHover};
       `,

diff --git a/src/containers/ThemeProvider/TokenContainer.tsx b/src/containers/ThemeProvider/TokenContainer.tsx
@@ -2,8 +2,7 @@ import { ReactElement, useMemo } from 'react';
 
 import { useAntdTheme, useThemeMode } from '@/hooks';
 import { PedestalProvider, reactCss } from '@/pedestal';
-import { SerializedStyles, Theme } from '@/types';
-import { convertStylishToString } from '@/utils/convertStylish';
+import { Theme } from '@/types';
 
 import type { ThemeProviderProps } from './type';
 
@@ -35,17 +34,13 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
   const customStylish = useMemo(() => {
     if (!stylishOrGetStylish) return {};
 
-    let rawStylish: Record<string, SerializedStyles>;
-
-    rawStylish = stylishOrGetStylish({
+    return stylishOrGetStylish({
       token: { ...token, ...customToken },
       stylish: antdStylish,
       appearance,
       isDarkMode,
       css: reactCss,
     });
-
-    return convertStylishToString(rawStylish);
   }, [stylishOrGetStylish, token, customToken, antdStylish, appearance]);
 
   const stylish = useMemo(

diff --git a/tests/containers/ThemeProvider.test.tsx b/tests/containers/ThemeProvider.test.tsx
@@ -149,11 +149,11 @@ describe('ThemeProvider', () => {
 
     it('注入自定义 stylish 方法', () => {
       const Wrapper: FC<PropsWithChildren> = ({ children }) => (
-        <ThemeProvider customStylish={() => ({ x: '' })}>{children}</ThemeProvider>
+        <ThemeProvider customStylish={({ css }) => ({ x: css`` })}>{children}</ThemeProvider>
       );
 
       const { result } = renderHook(useTheme, { wrapper: Wrapper });
-      expect(result.current.stylish.x).toBeUndefined();
+      expect(result.current.stylish.x.styles).toEqual('');
     });
   });