✨ feat: add antdPrefixCls

- Add antdPrefixCls to the return value of useStyles - Add antdPrefixCls to CreateStylesUtils
ant-design · Apr 9, 2024 · 9fca6f1 · 9fca6f1
1 parent 4187b95
commit 9fca6f1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git 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
@@ -32,15 +32,17 @@ export interface CreateStylesUtils extends CommonStyleUtils {
    */
   prefixCls: string;
   iconPrefixCls: string;
+  antdPrefixCls: string;
 }
 
 /**
  * 最终返回 styles 对象的类型定义
  */
 export interface ReturnStyles<T extends BaseReturnType> extends Pick<CommonStyleUtils, 'cx'> {
   styles: ReturnStyleToUse<T>;
-  theme: Omit<Theme, 'prefixCls'>;
+  theme: Omit<Theme, 'prefixCls' | 'antdPrefixCls'>;
   iconPrefixCls: string;
+  antdPrefixCls: string;
   prefixCls: string;
 }
 

diff --git 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,14 +38,15 @@ export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => {
       ...defaultCustomTheme,
       prefixCls,
       iconPrefixCls,
+      antdPrefixCls,
     }),
-    [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls],
+    [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls, antdPrefixCls],
   );
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (!styledTheme || Object.keys(styledTheme).length === 0) {
     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
@@ -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;
 }