docs(App): add edge usage warning (#48814)

* chore（App）: add edge usage warning

* test: add test

* docs(App): add FAQ

components/app/__tests__/index.test.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import type { NotificationConfig } from 'antd/es/notification/interface';
+import ConfigProvider from 'antd/es/config-provider';
 
 import App from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -211,6 +212,16 @@ describe('App', () => {
   });
 
   describe('component', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterEach(() => {
+      errorSpy.mockReset();
+    });
+
+    afterAll(() => {
+      errorSpy.mockRestore();
+    });
+
     it('replace', () => {
       const { container } = render(
         <App component="section">
@@ -222,15 +233,25 @@ describe('App', () => {
     });
 
     it('to false', () => {
-      const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const { container } = render(
         <App component={false}>
           <p />
         </App>,
       );
-      expect(warnSpy).not.toHaveBeenCalled();
+      expect(errorSpy).not.toHaveBeenCalled();
       expect(container.querySelector('.ant-app')).toBeFalsy();
-      warnSpy.mockRestore();
+    });
+
+    it('should warn if component is false and cssVarCls is not empty', () => {
+      render(
+        <ConfigProvider theme={{ cssVar: true }}>
+          <App component={false} />
+        </ConfigProvider>,
+      );
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: App] When using cssVar, ensure `component` is assigned a valid React component string.',
+      );
     });
   });
 });

components/app/index.en-US.md

@@ -131,10 +131,16 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| component | Config render element, if `false` will not create DOM node | ComponentType | div | 5.11.0 |
+| component | Config render element, if `false` will not create DOM node | ComponentType \| false | div | 5.11.0 |
 | message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
 | notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
 
 ## Design Token
 
 <ComponentTokenTable component="App"></ComponentTokenTable>
+
+## FAQ
+
+### CSS Var doesn't work inside `<App component={false}>`
+
+Make sure the App `component` is a legit React component string, so when you're turning on CSS variables, there's a container to hold the CSS class name.

components/app/index.tsx

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 
 import type { AnyObject, CustomComponent } from '../_util/type';
+import { devUseWarning } from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import useMessage from '../message/useMessage';
@@ -64,6 +65,13 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
     [messageApi, notificationApi, ModalApi],
   );
 
+  // https://github.com/ant-design/ant-design/issues/48802#issuecomment-2097813526
+  devUseWarning('App')(
+    !(cssVarCls && component === false),
+    'usage',
+    'When using cssVar, ensure `component` is assigned a valid React component string.',
+  );
+
   // ============================ Render ============================
   const Component = component === false ? React.Fragment : component;
   const rootProps: AppProps = {

components/app/index.zh-CN.md

@@ -132,10 +132,16 @@ export default () => {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| component | 设置渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType | div | 5.11.0 |
+| component | 设置渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | div | 5.11.0 |
 | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
 | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
 
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="App"></ComponentTokenTable>
+
+## FAQ
+
+### CSS Var 在 `<App component={false}>` 内不起作用
+
+请确保 App 的 `component` 是一个有效的 React 组件字符串，以便在启用 CSS 变量时，有一个容器来承载 CSS 类名。