Skip to content

Commit

Permalink
🐛 fix: 修正自定义 stylish 的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
arvinxx committed Feb 6, 2023
1 parent cf70f03 commit 61f195e
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 10 deletions.
1 change: 0 additions & 1 deletion docs/demos/cases/clay/default.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`,
Expand Down
9 changes: 2 additions & 7 deletions src/containers/ThemeProvider/TokenContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions tests/containers/ThemeProvider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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('');
});
});

Expand Down

0 comments on commit 61f195e

Please sign in to comment.