fix(components): fix useToken no supoort antd@4 的问题

packages/descriptions/src/index.tsx

@@ -17,15 +17,8 @@ import {
   LabelIconTip,
   useEditableMap,
 } from '@ant-design/pro-utils';
-import {
-  ConfigProvider,
-  Descriptions,
-  DescriptionsProps,
-  FormInstance,
-  FormProps,
-  Space,
-  theme,
-} from 'antd';
+import type { DescriptionsProps, FormInstance, FormProps } from 'antd';
+import { ConfigProvider, Descriptions, Space } from 'antd';
 import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import toArray from 'rc-util/lib/Children/toArray';
 import get from 'rc-util/lib/utils/get';
@@ -36,6 +29,7 @@ import useFetchData from './useFetchData';
 
 // 兼容代码-----------
 import type { ProFieldFCMode } from '@ant-design/pro-provider';
+import { proTheme } from '@ant-design/pro-provider';
 import 'antd/lib/descriptions/style';
 //----------------------
 
@@ -179,7 +173,7 @@ export const FieldRender: React.FC<
   } = props;
   const form = ProForm.useFormInstance();
 
-  const { token } = theme.useToken();
+  const { token } = proTheme.useToken?.();
 
   const fieldConfig = {
     text,

packages/field/src/components/ColorPicker/index.tsx

@@ -1,7 +1,8 @@
-import { useStyle } from '@ant-design/pro-provider';
+import { proTheme, useStyle } from '@ant-design/pro-provider';
 import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
 import { SketchPicker } from '@chenshuai2144/sketch-color';
-import { ConfigProvider, Popover, PopoverProps, theme } from 'antd';
+import type { PopoverProps } from 'antd';
+import { ConfigProvider, Popover } from 'antd';
 
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import React, { useContext, useImperativeHandle } from 'react';
@@ -39,7 +40,7 @@ const ColorPicker = React.forwardRef(
     const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('pro-field-color-picker');
 
-    const { token } = theme.useToken();
+    const { token } = proTheme.useToken();
     const [color, setColor] = useMergedState('#1890ff', {
       value: rest.value,
       onChange: rest.onChange,

packages/field/src/components/Options/index.tsx

@@ -1,8 +1,9 @@
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider } from 'antd';
 import React, { useContext, useImperativeHandle } from 'react';
 import type { ProFieldFC } from '../../index';
 
 // 兼容代码-----------
+import { proTheme } from '@ant-design/pro-provider';
 import 'antd/lib/space/style';
 //----------------------
 
@@ -36,7 +37,7 @@ const FieldOptions: ProFieldFC = (
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const className = getPrefixCls('pro-field-option');
 
-  const { token } = theme.useToken();
+  const { token } = proTheme.useToken();
 
   useImperativeHandle(ref, () => ({}));
 

packages/form/src/components/Submitter/index.tsx

@@ -1,5 +1,6 @@
-import { useIntl } from '@ant-design/pro-provider';
-import { Button, ButtonProps, Form, theme } from 'antd';
+import { proTheme, useIntl } from '@ant-design/pro-provider';
+import type { ButtonProps } from 'antd';
+import { Button, Form } from 'antd';
 import omit from 'omit.js';
 import React from 'react';
 
@@ -57,7 +58,7 @@ const Submitter: React.FC<SubmitterProps> = (props) => {
     resetButtonProps = {},
   } = props;
 
-  const { token } = theme.useToken();
+  const { token } = proTheme.useToken();
 
   const submit = () => {
     form.submit();

packages/table/src/Table.tsx

@@ -6,7 +6,7 @@ import 'antd/lib/typography/style';
 import ProCard from '@ant-design/pro-card';
 import ProForm from '@ant-design/pro-form';
 import type { ParamsType } from '@ant-design/pro-provider';
-import { ProConfigProvider, useIntl } from '@ant-design/pro-provider';
+import { ProConfigProvider, proTheme, useIntl } from '@ant-design/pro-provider';
 import {
   editableRowByKey,
   ErrorBoundary,
@@ -17,7 +17,8 @@ import {
   useEditableArray,
   useMountMergeState,
 } from '@ant-design/pro-utils';
-import { ConfigProvider, Table, TablePaginationConfig, theme } from 'antd';
+import type { TablePaginationConfig } from 'antd';
+import { ConfigProvider, Table } from 'antd';
 import type {
   GetRowKey,
   SortOrder,
@@ -692,7 +693,7 @@ const ProTable = <
   });
 
   // ============================ Render ============================
-  const { token } = theme.useToken();
+  const { token } = proTheme?.useToken();
 
   /** 绑定 action */
   useActionType(actionRef, action, {

packages/table/src/components/ListToolBar/index.tsx

@@ -1,13 +1,7 @@
-import { useIntl } from '@ant-design/pro-provider';
+import { proTheme, useIntl } from '@ant-design/pro-provider';
 import { LabelIconTip } from '@ant-design/pro-utils';
-import {
-  ConfigProvider,
-  Input,
-  TabPaneProps,
-  Tabs,
-  theme,
-  Tooltip,
-} from 'antd';
+import type { TabPaneProps } from 'antd';
+import { ConfigProvider, Input, Tabs, Tooltip } from 'antd';
 import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { SearchProps } from 'antd/lib/input';
 import classNames from 'classnames';
@@ -161,7 +155,7 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
   menu,
 }) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const { token } = theme.useToken();
+  const { token } = proTheme.useToken();
   const prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
 
   const { wrapSSR, hashId } = useStyle(prefixCls);

tests/form/base.test.tsx

@@ -1,4 +1,5 @@
 import { FontSizeOutlined } from '@ant-design/icons';
+import type { ProFormInstance } from '@ant-design/pro-form';
 import ProForm, {
   ProFormCaptcha,
   ProFormCheckbox,
@@ -9,7 +10,6 @@ import ProForm, {
   ProFormDigit,
   ProFormDigitRange,
   ProFormField,
-  ProFormInstance,
   ProFormSelect,
   ProFormText,
   ProFormTimePicker,