✨ feat: 在各方法中新增 prefixCls 的参数

ant-design · Jan 21, 2023 · 33d23b4 · 33d23b4
1 parent 576465b
commit 33d23b4
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 16 deletions.
diff --git a/src/containers/ThemeProvider/ThemeProvider.tsx b/src/containers/ThemeProvider/ThemeProvider.tsx
@@ -36,7 +36,11 @@ export const ThemeProvider: <T = any, S = any>(
         theme={theme}
         getStaticInstance={getStaticInstance}
       >
-        <TokenContainer customToken={customToken} customStylish={customStylish}>
+        <TokenContainer
+          prefixCls={prefixCls}
+          customToken={customToken}
+          customStylish={customStylish}
+        >
           {children}
         </TokenContainer>
       </AntdProvider>

diff --git a/src/containers/ThemeProvider/TokenContainer.tsx b/src/containers/ThemeProvider/TokenContainer.tsx
@@ -10,13 +10,14 @@ import { Theme } from '@/types';
 
 type TokenContainerProps<T, S = Record<string, string>> = Pick<
   ThemeProviderProps<T, S>,
-  'children' | 'customToken' | 'customStylish'
+  'children' | 'customToken' | 'customStylish' | 'prefixCls'
 >;
 
 const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement | null = ({
   children,
   customToken: customTokenOrFn,
   customStylish: stylishOrGetStylish,
+  prefixCls = 'ant',
 }) => {
   const themeState = useThemeMode();
   const { appearance, isDarkMode } = themeState;
@@ -53,6 +54,7 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
     ...customToken,
     stylish,
     ...themeState,
+    prefixCls,
   };
 
   return <Provider theme={theme}>{children}</Provider>;

diff --git a/src/context/EmotionContext.ts b/src/context/EmotionContext.ts
@@ -2,9 +2,4 @@ import { createContext } from 'react';
 
 import { emotion, type Emotion } from '@/functions';
 
-export interface CommonStyleUtils {
-  cx: Emotion['cx'];
-  css: Emotion['css'];
-}
-
 export const EmotionContext = createContext<Emotion>(emotion);
diff --git a/src/functions/createStyles.ts b/src/functions/createStyles.ts
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import { CommonStyleUtils } from '@/context';
 import { useEmotion, useTheme } from '@/hooks';
-import {
+import type {
+  CommonStyleUtils,
   FullStylish,
   FullToken,
   ReturnStyleToUse,
@@ -18,15 +18,17 @@ export interface CreateStylesTheme extends CommonStyleUtils {
   stylish: FullStylish;
   appearance: ThemeAppearance;
   isDarkMode: boolean;
+  prefixCls: string;
 }
 
 /**
  * 最终返回 styles 对象的类型定义
  */
 export interface ReturnStyles<T extends StyleInputType> {
   styles: ReturnStyleToUse<T>;
-  theme: Theme;
+  theme: Omit<Theme, 'prefixCls'>;
   cx: Emotion['cx'];
+  prefixCls: string;
 }
 
 // 获取样式
@@ -56,14 +58,17 @@ export const createStyles =
     const styles = useMemo(() => {
       let tempStyles: ReturnStyleToUse<Input>;
 
+      // 函数场景
       if (styleOrGetStyleFn instanceof Function) {
-        const { stylish, appearance, isDarkMode, ...token } = theme;
+        const { stylish, appearance, isDarkMode, prefixCls, ...token } = theme;
 
         tempStyles = styleOrGetStyleFn(
-          { token, stylish, appearance, cx, css, isDarkMode },
+          { token, stylish, appearance, cx, css, isDarkMode, prefixCls },
           props!,
         ) as any;
-      } else {
+      }
+      // 没有函数时直接就是 object 或者 string
+      else {
         tempStyles = styleOrGetStyleFn as any;
       }
 
@@ -82,5 +87,8 @@ export const createStyles =
       return tempStyles;
     }, [styleOrGetStyleFn, props, theme]);
 
-    return useMemo(() => ({ styles, cx, theme }), [styles, theme]);
+    return useMemo(() => {
+      const { prefixCls, ...res } = theme;
+      return { styles, cx, theme: res, prefixCls };
+    }, [styles, theme]);
   };
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -10,7 +10,10 @@ export const useTheme = (): Theme => {
   const themeState = useThemeMode();
   const defaultTheme = _useTheme();
 
-  const initTheme = useMemo(() => ({ ...antdTheme, ...themeState }), [antdTheme, themeState]);
+  const initTheme = useMemo<Theme>(
+    () => ({ ...antdTheme, ...themeState, prefixCls: 'ant' }),
+    [antdTheme, themeState],
+  );
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (Object.keys(defaultTheme).length === 0) {

diff --git a/src/types/theme.ts b/src/types/theme.ts
@@ -1,9 +1,13 @@
 import { ThemeConfig } from 'antd/es/config-provider/context';
 import { AliasToken } from 'antd/es/theme/interface';
 
-import { CommonStyleUtils } from '@/context';
+import { Emotion } from '@/functions';
 import { ThemeAppearance, ThemeMode } from './appearance';
 
+export interface CommonStyleUtils {
+  cx: Emotion['cx'];
+  css: Emotion['css'];
+}
 export interface ThemeContextState {
   appearance: ThemeAppearance;
   themeMode: ThemeMode;
@@ -54,4 +58,6 @@ export interface FullToken extends AntdToken, CustomToken {}
 
 export interface Theme extends FullToken, ThemeContextState {
   stylish: FullStylish;
+
+  prefixCls: string;
 }