diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx
index a52ddf221397..3ce1d976dcd8 100644
--- a/packages/descriptions/src/index.tsx
+++ b/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,
diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx
index 1ff10237a611..6b61ce23f6c2 100644
--- a/packages/field/src/components/ColorPicker/index.tsx
+++ b/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,
diff --git a/packages/field/src/components/Options/index.tsx b/packages/field/src/components/Options/index.tsx
index 71f3642a9815..a3fc043c7584 100644
--- a/packages/field/src/components/Options/index.tsx
+++ b/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, () => ({}));
 
diff --git a/packages/form/src/components/Submitter/index.tsx b/packages/form/src/components/Submitter/index.tsx
index 5a8c5c11356e..a7f8db180133 100644
--- a/packages/form/src/components/Submitter/index.tsx
+++ b/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();
diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx
index 8ef99ea9a923..f70007e64730 100644
--- a/packages/table/src/Table.tsx
+++ b/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, {
diff --git a/packages/table/src/components/ListToolBar/index.tsx b/packages/table/src/components/ListToolBar/index.tsx
index 10b4cea5578b..127d498e8068 100644
--- a/packages/table/src/components/ListToolBar/index.tsx
+++ b/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);
diff --git a/tests/form/base.test.tsx b/tests/form/base.test.tsx
index 6896e62c2297..4bede54ee63c 100644
--- a/tests/form/base.test.tsx
+++ b/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,