diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts
deleted file mode 100644
index 15ff80290c..0000000000
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.style.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-import { createStyles } from '@nocobase/client';
-
-export const useMobileTabsForMobileActionPageStyle = createStyles(({ css, token }: any) => {
-  return {
-    container: css`
-      cursor: pointer;
-      text-align: right;
-      flex: 1;
-      padding-right: var(--nb-mobile-page-tabs-content-padding);
-
-      .ant-btn {
-        width: 32px;
-        height: 32px;
-        padding: 0;
-      }
-
-      .ant-btn > span {
-        display: none;
-      }
-
-      span.ant-btn-icon {
-        display: inline-block;
-        font-size: 16px;
-        margin: 0 !important;
-      }
-    `,
-
-    backButton: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      height: 50px;
-      width: 50px;
-    `,
-  };
-});
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
index ce6b10cbde..78853cebe3 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/mobile-action-page/MobileTabsForMobileActionPage.tsx
@@ -28,7 +28,6 @@ import { MobilePageHeader } from '../../pages/dynamic-page';
 import { MobilePageContentContainer } from '../../pages/dynamic-page/content/MobilePageContentContainer';
 import { useStyles } from '../../pages/dynamic-page/header/tabs';
 import { hideDivider } from '../hideDivider';
-import { useMobileTabsForMobileActionPageStyle } from './MobileTabsForMobileActionPage.style';
 
 export const MobileTabsForMobileActionPage: any = observer(
   (props) => {
@@ -36,8 +35,7 @@ export const MobileTabsForMobileActionPage: any = observer(
     const { render } = useSchemaInitializerRender(fieldSchema['x-initializer'], fieldSchema['x-initializer-props']);
     const { activeKey: _activeKey, onChange: _onChange } = useTabsContext() || {};
     const [activeKey, setActiveKey] = useState(_activeKey);
-    const { styles } = useStyles();
-    const { styles: mobileTabsForMobileActionPageStyle } = useMobileTabsForMobileActionPageStyle();
+    const { componentCls, hashId } = useStyles();
     const { goBack } = useBackButton();
     const keyToTabRef = useRef({});
 
@@ -81,16 +79,16 @@ export const MobileTabsForMobileActionPage: any = observer(
     return (
       <>
         <MobilePageHeader>
-          <div className={styles.mobilePageTabs} data-testid="mobile-action-page-tabs">
-            <div className={mobileTabsForMobileActionPageStyle.backButton} onClick={goBack}>
+          <div className={`${componentCls} ${hashId}`} data-testid="mobile-action-page-tabs">
+            <div className="nb-mobile-page-tabs-back-button" onClick={goBack}>
               <LeftOutline />
             </div>
             <DndContext>
-              <Tabs activeKey={activeKey} onChange={onChange} className={styles.mobilePageTabsList}>
+              <Tabs activeKey={activeKey} onChange={onChange} className="nb-mobile-page-tabs-list">
                 {items}
               </Tabs>
             </DndContext>
-            <div className={mobileTabsForMobileActionPageStyle.container}>{render()}</div>
+            <div className="nb-mobile-page-tabs-button">{render()}</div>
           </div>
         </MobilePageHeader>
         <MobilePageContentContainer hideTabBar>{tabContent}</MobilePageContentContainer>
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx
index b3ee591ead..2f7d8560b3 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/MobilePageTabs.tsx
@@ -23,7 +23,7 @@ export const MobilePageTabs: FC = () => {
   const { displayTabs = false } = useMobilePage();
 
   const navigate = useNavigate();
-  const { styles } = useStyles();
+  const { componentCls, hashId } = useStyles();
   const { tabSchemaUid } = useParams<{ tabSchemaUid: string }>();
   const [activeKey, setActiveKey] = React.useState<string>(() => {
     return tabSchemaUid || activeTabBarItem?.children?.[0]?.schemaUid;
@@ -52,9 +52,9 @@ export const MobilePageTabs: FC = () => {
   if (!displayTabs) return null;
 
   return (
-    <div className={styles.mobilePageTabs} data-testid="mobile-page-tabs">
+    <div className={`${componentCls} ${hashId}`} data-testid="mobile-page-tabs">
       <DndContext onDragEnd={handleDragEnd}>
-        <Tabs activeKey={activeKey} onChange={handleChange} className={styles.mobilePageTabsList}>
+        <Tabs activeKey={activeKey} onChange={handleChange} className="nb-mobile-page-tabs-list">
           {activeTabBarItem.children?.map((item) => (
             <Tabs.Tab
               data-testid={`mobile-page-tabs-${item.title}`}
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/styles.ts b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/styles.ts
index 1b358ab099..359b025d1e 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/styles.ts
+++ b/packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/header/tabs/styles.ts
@@ -7,22 +7,58 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '@nocobase/client';
 
-export const useStyles = createStyles(() => ({
-  mobilePageTabs: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  mobilePageTabsList: {
-    '.adm-tabs-header': {
-      borderBottomWidth: 0,
-    },
+export const useStyles = genStyleHook('nb-mobile-tabs-for-mobile-action-page', (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
 
-    '.adm-tabs-tab': {
-      height: 49,
-      padding: '10px 0 10px',
+      '.nb-mobile-page-tabs-list': {
+        '.adm-tabs-header': {
+          borderBottomWidth: 0,
+        },
+
+        '.adm-tabs-tab': {
+          height: 49,
+          padding: '10px 0 10px',
+        },
+      },
+
+      '.nb-mobile-page-tabs-button': {
+        cursor: 'pointer',
+        textAlign: 'right',
+        flex: 1,
+        paddingRight: 'var(--nb-mobile-page-tabs-content-padding)',
+
+        '.ant-btn': {
+          width: 32,
+          height: 32,
+          padding: 0,
+        },
+
+        '.ant-btn > span': {
+          display: 'none',
+        },
+
+        'span.ant-btn-icon': {
+          display: 'inline-block',
+          fontSize: 16,
+          margin: '0 !important',
+        },
+      },
+
+      '.nb-mobile-page-tabs-back-button': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 24,
+        height: 50,
+        width: 50,
+      },
     },
-  },
-}));
+  };
+});