✨ feat: add antdPrefixCls

- Add antdPrefixCls to the return value of useStyles - Add antdPrefixCls to CreateStylesUtils
ant-design · Jun 20, 2024 · 3b4f67d · 3b4f67d
1 parent 96914f0
commit 3b4f67d
Show file tree

Hide file tree

Showing 5 changed files with 79 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;
 }
diff --git 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 <div className={`${styles.button} ant-div`}>my custom button</div>;
+      };
+
+      const { container } = render(<App />);
+      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 (
+          <div className={`${styles.button} ${`${myCustomAntPrefix}-div`}`}>my custom Button</div>
+        );
+      };
+
+      const wrapper = ({ children }: PropsWithChildren) => (
+        <ConfigProvider prefixCls={myCustomAntPrefix}>{children}</ConfigProvider>
+      );
+
+      const { container } = render(<App />, { wrapper });
+      expect(container.firstChild).toHaveClass(`${myCustomAntPrefix}-div`);
+      expect(container.firstChild).toHaveStyle({ fontSize: '11px' });
+    });
+
     describe('styleObject 方法', () => {
       it('对象模式的用法', () => {
         const useStyles = createStyles({