feat(App): icon reset style feature

ammar-knowledge · Mar 13, 2023 · be69055 · be69055
1 parent f8092b7
commit be69055
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/components/app/index.tsx b/components/app/index.tsx
@@ -30,9 +30,9 @@ const App: React.FC<AppProps> & { useApp: typeof useApp } = (props) => {
     notification,
     style,
   } = props;
-  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const { getPrefixCls, iconPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
   const customClassName = classNames(hashId, prefixCls, className, rootClassName);
 
   const appConfig = useContext<AppConfig>(AppConfigContext);

diff --git a/components/app/style/index.ts b/components/app/style/index.ts
@@ -1,5 +1,6 @@
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
+import { useResetIconStyle } from '../../config-provider/style';
 
 export type ComponentToken = {};
 
@@ -18,5 +19,14 @@ const genBaseStyle: GenerateStyle<AppToken> = (token) => {
   };
 };
 
+const useStyle = (prefixCls: string, iconPrefixCls: string) => {
+  const [wrapSSR, ...rest] = genComponentStyleHook('App', genBaseStyle)(prefixCls);
+  const iconWrapSSR = useResetIconStyle(iconPrefixCls);
+
+  const finalWrapSSR = (node: React.ReactElement) => wrapSSR(iconWrapSSR(node));
+
+  return [finalWrapSSR, ...rest] as const;
+};
+
 // ============================== Export ==============================
-export default genComponentStyleHook('App', (token) => [genBaseStyle(token)]);
+export default useStyle;
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -25,7 +25,7 @@ import useConfig from './hooks/useConfig';
 import useTheme from './hooks/useTheme';
 import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
-import useStyle from './style';
+import { useResetIconStyle } from './style';
 
 /**
  * Since too many feedback using static method like `Modal.confirm` not getting theme,
@@ -206,7 +206,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const shouldWrapSSR = iconPrefixCls !== parentContext.iconPrefixCls;
   const csp = customCsp || parentContext.csp;
 
-  const wrapSSR = useStyle(iconPrefixCls);
+  const wrapSSR = useResetIconStyle(iconPrefixCls);
 
   const mergedTheme = useTheme(theme, parentContext.theme);
 

diff --git a/components/config-provider/style/index.ts b/components/config-provider/style/index.ts
@@ -1,8 +1,9 @@
+/* eslint-disable import/prefer-default-export */
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { resetIcon } from '../../style';
 import { useToken } from '../../theme/internal';
 
-const useStyle = (iconPrefixCls: string) => {
+export const useResetIconStyle = (iconPrefixCls: string) => {
   const [theme, token] = useToken();
   // Generate style for icons
   return useStyleRegister(
@@ -19,5 +20,3 @@ const useStyle = (iconPrefixCls: string) => {
     ],
   );
 };
-
-export default useStyle;