diff --git a/src/factories/createStyles/index.ts b/src/factories/createStyles/index.ts index bc178f47..483cc90a 100644 --- a/src/factories/createStyles/index.ts +++ b/src/factories/createStyles/index.ts @@ -57,7 +57,15 @@ export const createStylesFactory = // 函数场景 if (styleOrGetStyle instanceof Function) { - const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, ...token } = theme; + const { + stylish, + appearance, + isDarkMode, + prefixCls, + iconPrefixCls, + antdPrefixCls, + ...token + } = theme; // 创建响应式断点选择器的工具函数 // @ts-ignore @@ -74,6 +82,7 @@ export const createStylesFactory = isDarkMode, prefixCls, iconPrefixCls, + antdPrefixCls, // 工具函数们 cx, css: serializeCSS, @@ -122,8 +131,8 @@ export const createStylesFactory = }, [props, theme]); return useMemo(() => { - const { prefixCls, iconPrefixCls, ...res } = theme; - return { styles, cx, theme: res, prefixCls, iconPrefixCls }; + const { prefixCls, iconPrefixCls, antdPrefixCls, ...res } = theme; + return { styles, cx, theme: res, prefixCls, iconPrefixCls, antdPrefixCls }; }, [styles, theme]); }; }; diff --git a/src/factories/createStyles/types.ts b/src/factories/createStyles/types.ts index 1e3d380f..86c59944 100644 --- a/src/factories/createStyles/types.ts +++ b/src/factories/createStyles/types.ts @@ -32,6 +32,7 @@ export interface CreateStylesUtils extends CommonStyleUtils { */ prefixCls: string; iconPrefixCls: string; + antdPrefixCls: string; } /** @@ -39,8 +40,9 @@ export interface CreateStylesUtils extends CommonStyleUtils { */ export interface ReturnStyles extends Pick { styles: ReturnStyleToUse; - theme: Omit; + theme: Omit; iconPrefixCls: string; + antdPrefixCls: string; prefixCls: string; } diff --git a/src/factories/createUseTheme.ts b/src/factories/createUseTheme.ts index bda0f676..88d3f3f5 100644 --- a/src/factories/createUseTheme.ts +++ b/src/factories/createUseTheme.ts @@ -27,7 +27,7 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => { const { iconPrefixCls, getPrefixCls } = useContext(ConfigProvider.ConfigContext); const antdPrefixCls = getPrefixCls(); - // 只有当用户在 createInstance 中传入与 ant 不一样的 prefixCls 时,才会使用用户的 prefixCls + // 只有当用户在 createInstance 中传入与字符串 'ant' 不一样的 prefixCls 时,才会使用用户的 prefixCls // 否则其他情况下都优先使用 antd 的 prefixCls const prefixCls = outPrefixCls && outPrefixCls !== 'ant' ? outPrefixCls : antdPrefixCls; @@ -38,8 +38,9 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => { ...defaultCustomTheme, prefixCls, iconPrefixCls, + antdPrefixCls, }), - [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls], + [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls, antdPrefixCls], ); // 如果是个空值,说明没有套 Provider,返回 antdTheme 的默认值 @@ -47,5 +48,5 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => { return initTheme; } - return { ...styledTheme, prefixCls, iconPrefixCls } as Theme; + return { ...styledTheme, prefixCls, iconPrefixCls, antdPrefixCls } as Theme; }; diff --git a/src/types/theme.ts b/src/types/theme.ts index 79d8b4de..c572ee4c 100644 --- a/src/types/theme.ts +++ b/src/types/theme.ts @@ -73,8 +73,13 @@ export interface FullToken extends AntdToken, CustomToken {} export interface Theme extends FullToken, ThemeContextState { stylish: FullStylish; /** - * antd 组件的 prefixCls + * 只有当用户在 createInstance 中传入与字符串 'ant' 不一样的 prefixCls 时,才会返回用户的 prefixCls + * 否则返回 antd 的 prefixCls */ prefixCls: string; iconPrefixCls: string; + /** + * antd 组件的 prefixCls + */ + antdPrefixCls: string; } diff --git a/tests/functions/createStyles.test.tsx b/tests/functions/createStyles.test.tsx index 9cfcf264..a4c8a72d 100644 --- a/tests/functions/createStyles.test.tsx +++ b/tests/functions/createStyles.test.tsx @@ -92,6 +92,60 @@ describe('createStyles', () => { }); }); + it('获取 antdPrefixCls,未通过ConfigProvider传入 prefixCls时,拿到的perfixCls应该为ant design默认的"ant"', () => { + const useStyles = createStyles(({ css, antdPrefixCls }) => { + return { + button: css` + &.${antdPrefixCls}-div { + background: lightsteelblue; + border: none; + font-size: 10px; + } + `, + }; + }); + + const App = () => { + const { styles } = useStyles(); + + return
my custom button
; + }; + + const { container } = render(); + expect(container.firstChild).toHaveStyle({ fontSize: '10px' }); + }); + + it('获取 antdPrefixCls,通过ConfigProvider传入 prefixCls 时,拿到的值为传入的prefixCls', () => { + const myCustomAntPrefix = 'my-custom-ant-prefix2'; + const useStyles = createStyles(({ css, antdPrefixCls }) => { + return { + button: css` + &.${antdPrefixCls}-div { + background: lightsteelblue; + border: none; + font-size: 11px; + } + `, + }; + }); + + const App = () => { + const { styles } = useStyles(); + + return ( +
my custom Button
+ ); + }; + + const wrapper = ({ children }: PropsWithChildren) => ( + {children} + ); + + const { container } = render(, { wrapper }); + expect(container.firstChild).toHaveClass(`${myCustomAntPrefix}-div`); + expect(container.firstChild).toHaveStyle({ fontSize: '11px' }); + }); + describe('styleObject 方法', () => { it('对象模式的用法', () => { const useStyles = createStyles({