✨ feat: 经过讨论移除 AppContainer 容器组件，直接使用 antd 的 App 即可

BREAKING CHANGES: 移除 AppContainer

docs/api/theme-provider.md

@@ -4,18 +4,27 @@ order: 1
 group:
   title: 容器组件
   order: 1
+demo:
+  cols: 2
 ---
 
 # ThemeProvider
 
-用于全局管理主题变量的容器，该组件在封装 `ConfigProvider`
-基础上，提供了一键切换亮暗色主题、自定义主题、应用级作用域样式的统一入口。同时在该容器下的 `useTheme` 方法可获得这一层容器中的
-token 值。
+用于全局管理主题变量的容器，该组件在封装 `ConfigProvider` 基础上，提供了一键切换亮暗色主题、自定义主题、应用级作用域样式的统一入口。同时在该容器下的 `useTheme` 方法可获得这一层容器中的 `theme` 对象。
 
-1. 提供适配主题的 antd 静态方法对象；
-2. 提供系统主题管理与自适应的能力；
+ThemeProvider 本质上是一个 React Context 的数据容器，用于为子级应用提供主题消费的相关数据，因此：
 
-## 默认用法
+- 集成了亮暗色主题切换的基础状态并支持系统主题管理与自适应的能力；
+- 提供 antd 静态对象实例的回调对象（该静态方法能响应主题）；
+- 该组件不具有真实的 DOM 节点，只有虚拟节点，因此无法通过节点样式来限制自定义样式的范围；
+
+## 主题切换
+
+ThemeProvider 默认集成亮暗色主题切换能力，通过 `appearance` props 即可快速完成亮暗色的主题切换。如需详细了解 `antd-style` 的主题切换能力，可以参阅 [主题切换](/guide/switch-theme) 这一部分。
+
+<code src="../demos/ThemeProvider/SwitchTheme.tsx"></code>
+
+## useTheme 用法
 
 全局顶层包裹 ThemeProvider 后，使用 `useTheme` 获取 antd Token 主题值。
 
@@ -40,9 +49,9 @@ export default () => {
 实例效果：
 <code src="../demos/ThemeProvider/default.tsx"></code>
 
-:::warning
+:::info{title=温馨提示}
 
-`useTheme` 会获取上一层 `ThemeProvider` 组件中的
+`useTheme` 会查找最近一层的 `ThemeProvider` 组件中的 theme 值。如果存在多层嵌套，最里面的一层才会生效。
 
 :::
 
@@ -103,6 +112,59 @@ export default () => (
 );
 ```
 
+## 基础样式重置
+
+如果没有包裹，在 dumi 文档中 a 节点的默认效果如下所示。
+
+<code src="../demos/ThemeProvider/demo.tsx"></code>
+
+而通过 antd App 组件的样式重置，可以保证不在 antd 组件中的原生标签（`<a>` 等）也能符合 antd 的默认样式（左下）。
+
+<code src="../demos/ThemeProvider/WithApp.tsx"></code>
+<code src="../demos/ThemeProvider/WithProvider.tsx"></code>
+
+### 消费静态实例方法
+
+v5 中由于 react 生命周期的问题移除了静态方法，因此如果使用 antd 默认导出的 message 等静态方法，会无法响应动态主题。因此 ThemeProvider 这种提供了一个 `getStaticInstance` 将可以响应动态主题的静态方法实例提供到外部。
+
+```tsx | pure
+/**
+ * iframe: 240
+ */
+import { ThemeProvider } from 'antd-style';
+import { MessageInstance } from 'antd/es/message/interface';
+
+let message: MessageInstance;
+
+export default () => {
+  const showMessage = () => {
+    message.success('Success!');
+  };
+  return (
+    <ThemeProvider
+      getStaticInstance={(instances) => {
+        message = instances.message;
+      }}
+    >
+      {/*... */}
+    </ThemeProvider>
+  );
+};
+```
+
+<code src="../demos/ThemeProvider/staticMethod.tsx"></code>
+
+## 添加容器作用域样式
+
+如果需要只影响 ThemeProvider 下的样式，可以结合 antd 的 App 组件，利用它的 `className` 的 props 结合 `css` 或 [createStyles](/usage/create-styles) 方法，即可添加局部作用域样式。
+
+<code src="../demos/ThemeProvider/AppGlobalStyle.tsx"></code>
+
+:::info{title=全局样式作用域}
+在 css-in-js 的世界中，局部作用域非常容易实现。因此，除非必要，应该尽量减少全局作用域的使用。 这也是 antd v5 中推荐的用法。
+但如果仍然需全局作用域层面的样式注入，可以使用 [createGlobalStyles](/usage/global-styles)
+:::
+
 ### ThemeProvider API
 
 | 名称               | 默认值                             | 描述                                                                                                     |

docs/demos/AppContainer/AppGlobalStyle.tsx → docs/demos/ThemeProvider/AppGlobalStyle.tsx

@@ -2,8 +2,8 @@
  * iframe: 180
  */
 import { css } from '@emotion/css';
-import { Divider } from 'antd';
-import { AppContainer } from 'antd-style';
+import { App, Divider } from 'antd';
+import { ThemeProvider } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
 const appScopeStyle = css`
@@ -25,9 +25,11 @@ export default () => {
     <Flexbox>
       <div className={'custom-button'}>Out App Container Custom Button</div>
       <Divider />
-      <AppContainer className={appScopeStyle}>
-        <div className={'custom-button'}>in App Container Custom Button</div>
-      </AppContainer>
+      <ThemeProvider>
+        <App className={appScopeStyle}>
+          <div className={'custom-button'}>in App Container Custom Button</div>
+        </App>
+      </ThemeProvider>
     </Flexbox>
   );
 };

docs/demos/ThemeProvider/WithApp.tsx

@@ -0,0 +1,19 @@
+/**
+ * title: ThemeProvider + App
+ * description: 由于 App 有 DOM 节点，能限制作用域来修改 DOM 原生样式，因此可以重置原生节点样式
+ * iframe: 80
+ */
+import { App } from 'antd';
+import { ThemeProvider } from 'antd-style';
+
+import Demo from './demo';
+
+export default () => {
+  return (
+    <ThemeProvider>
+      <App>
+        <Demo />
+      </App>
+    </ThemeProvider>
+  );
+};

docs/demos/AppContainer/demo.tsx → docs/demos/ThemeProvider/demo.tsx

@@ -4,7 +4,7 @@
 const App = () => {
   return (
     <div style={{ padding: 16 }}>
-      <a href="">节点样式</a>
+      <a href="docs/demos/AppContainer">节点样式</a>
     </div>
   );
 };

docs/demos/AppContainer/staticMethod.tsx → docs/demos/ThemeProvider/staticMethod.tsx

@@ -2,9 +2,16 @@
  * iframe: 240
  */
 import { Button, Space } from 'antd';
-import { AppContainer, message, modal, notification } from 'antd-style';
+import { ThemeProvider } from 'antd-style';
+import { MessageInstance } from 'antd/es/message/interface';
+import { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import { NotificationInstance } from 'antd/es/notification/interface';
 import { Center } from 'react-layout-kit';
 
+let message: MessageInstance,
+  modal: Omit<ModalStaticFunctions, 'warn'>,
+  notification: NotificationInstance;
+
 const App = () => {
   const showMessage = () => {
     message.success('Success!');
@@ -38,9 +45,18 @@ const App = () => {
 export default () => {
   return (
     <Center style={{ height: '100vh', background: '#f5f5f5' }}>
-      <AppContainer>
+      <ThemeProvider
+        theme={{
+          token: { colorPrimary: '#5bdbe6', colorInfo: '#5bdbe6', borderRadius: 2 },
+        }}
+        getStaticInstance={(instances) => {
+          message = instances.message;
+          modal = instances.modal;
+          notification = instances.notification;
+        }}
+      >
         <App />
-      </AppContainer>
+      </ThemeProvider>
     </Center>
   );
 };