fix: can't transfer configProvider in the content of Modal/Message/No…

components/ConfigProvider/index.tsx

@@ -5,7 +5,7 @@ import { lighten } from './util';
 import Message from '../Message';
 import Notification from '../Notification';
 import Empty from '../Empty';
-import { setConfigProviderProps } from '../Modal/config';
+import { setConfigProviderProps } from '../_util/transferConfigProvider';
 import { IconContext } from '../../icon/react-icon/context';
 import { ConfigProviderProps } from './interface';
 import omit from '../_util/omit';
@@ -87,7 +87,7 @@ export const ConfigContext = createContext<ConfigProviderProps>({
 
 function ConfigProvider(baseProps: ConfigProviderProps) {
   const props = useMergeProps<ConfigProviderProps>(baseProps, defaultProps, componentConfig);
-  const { theme, prefixCls, children, locale, rtl, effectGlobalNotice = true } = props;
+  const { theme, prefixCls, children, rtl, effectGlobalNotice = true } = props;
 
   useEffect(() => {
     setTheme(theme);
@@ -110,8 +110,11 @@ function ConfigProvider(baseProps: ConfigProviderProps) {
   };
 
   useEffect(() => {
-    setConfigProviderProps({ locale, prefixCls, rtl });
-  }, [locale, prefixCls]);
+    // If the internal components are manually wrapped, there is no need to reset
+    if (!props._inLoop) {
+      setConfigProviderProps(config);
+    }
+  }, [config]);
 
   let child = children;
 

components/ConfigProvider/interface.ts

@@ -237,4 +237,5 @@ export interface ConfigProviderProps {
   effectGlobalNotice?: boolean;
   zIndex?: number;
   children?: ReactNode;
+  _inLoop?: boolean;
 }

components/Message/index.tsx

@@ -6,7 +6,9 @@ import Notice from '../_class/notice';
 import cs from '../_util/classNames';
 import { MessageProps } from './interface';
 import { isUndefined } from '../_util/is';
+import { getConfigProviderProps } from '../_util/transferConfigProvider';
 import useMessage, { messageFuncType } from './useMessage';
+import { ConfigProvider } from '..';
 
 const messageTypes = ['info', 'success', 'error', 'warning', 'loading', 'normal'];
 let messageInstance: object = {};
@@ -140,6 +142,8 @@ class Message extends BaseNotification {
     const mergedRtl = !isUndefined(_rtl) ? _rtl : rtl;
     const prefixClsMessage = mergedPrefixCls ? `${mergedPrefixCls}-message` : 'arco-message';
     const classNames = cs(`${prefixClsMessage}-wrapper`, `${prefixClsMessage}-wrapper-${position}`);
+    const configProviderProps = getConfigProviderProps();
+
     return (
       <div className={classNames}>
         <TransitionGroup component={null}>
@@ -162,14 +166,16 @@ class Message extends BaseNotification {
                 notice.onClose && notice.onClose();
               }}
             >
-              <Notice
-                {...notice}
-                prefixCls={prefixClsMessage}
-                iconPrefix={mergedPrefixCls}
-                onClose={this.remove}
-                noticeType="message"
-                rtl={mergedRtl}
-              />
+              <ConfigProvider {...configProviderProps} _inLoop>
+                <Notice
+                  {...notice}
+                  prefixCls={prefixClsMessage}
+                  iconPrefix={mergedPrefixCls}
+                  onClose={this.remove}
+                  noticeType="message"
+                  rtl={mergedRtl}
+                />
+              </ConfigProvider>
             </CSSTransition>
           ))}
         </TransitionGroup>

components/Modal/config.ts

@@ -1,17 +1,3 @@
-import type { ConfigProviderProps } from '../ConfigProvider';
-
-let configProvider = {} as ConfigProviderProps;
-
-export function setConfigProviderProps(configProviderProps: ConfigProviderProps) {
-  configProvider = {
-    ...configProviderProps,
-  };
-}
-
-export function getConfigProviderProps() {
-  return configProvider;
-}
-
 export type ModalConfigType = {
   prefixCls?: string;
   simple?: boolean;

components/Modal/confirm.tsx

@@ -5,7 +5,8 @@ import IconInfoCircleFill from '../../icon/react-icon/IconInfoCircleFill';
 import IconCheckCircleFill from '../../icon/react-icon/IconCheckCircleFill';
 import IconExclamationCircleFill from '../../icon/react-icon/IconExclamationCircleFill';
 import IconCloseCircleFill from '../../icon/react-icon/IconCloseCircleFill';
-import { getModalConfig, destroyList, getConfigProviderProps } from './config';
+import { getModalConfig, destroyList } from './config';
+import { getConfigProviderProps } from '../_util/transferConfigProvider';
 import ConfigProvider from '../ConfigProvider';
 
 export interface ConfirmProps extends ModalProps {
@@ -74,7 +75,7 @@ function confirm(config: ConfirmProps, renderFunc?: (props: ConfirmProps) => voi
 
   function render(props: ConfirmProps) {
     const dom = (
-      <ConfigProvider {...configProviderProps}>
+      <ConfigProvider {...configProviderProps} _inLoop>
         <ConfirmModal {...props} onCancel={onCancel} />
       </ConfigProvider>
     );

components/Notification/index.tsx

@@ -7,6 +7,8 @@ import cs from '../_util/classNames';
 import { isNumber, isUndefined } from '../_util/is';
 import { NotificationProps } from './interface';
 import useNotification, { notificationFuncType } from './useNotification';
+import { getConfigProviderProps } from '../_util/transferConfigProvider';
+import { ConfigProvider } from '..';
 
 const notificationTypes = ['info', 'success', 'error', 'warning', 'normal'];
 let notificationInstance: object = {};
@@ -148,6 +150,8 @@ class Notification extends BaseNotification {
       { [`${prefixClsNotification}-wrapper-rtl`]: rtl }
     );
 
+    const configProviderProps = getConfigProviderProps();
+
     return (
       <div className={classNames}>
         <TransitionGroup component={null}>
@@ -170,14 +174,16 @@ class Notification extends BaseNotification {
                 notice.onClose && notice.onClose();
               }}
             >
-              <Notice
-                {...notice}
-                onClose={this.remove}
-                prefixCls={prefixClsNotification}
-                iconPrefix={mergedPrefixCls}
-                noticeType="notification"
-                rtl={mergedRtl}
-              />
+              <ConfigProvider {...configProviderProps} _inLoop>
+                <Notice
+                  {...notice}
+                  onClose={this.remove}
+                  prefixCls={prefixClsNotification}
+                  iconPrefix={mergedPrefixCls}
+                  noticeType="notification"
+                  rtl={mergedRtl}
+                />
+              </ConfigProvider>
             </CSSTransition>
           ))}
         </TransitionGroup>

components/_util/transferConfigProvider.ts

@@ -0,0 +1,13 @@
+import type { ConfigProviderProps } from '../ConfigProvider';
+
+let configProvider = {} as ConfigProviderProps;
+
+export function setConfigProviderProps(configProviderProps: ConfigProviderProps) {
+  configProvider = {
+    ...configProviderProps,
+  };
+}
+
+export function getConfigProviderProps() {
+  return configProvider;
+}