diff --git a/src/packages/pagination/pagination.taro.tsx b/src/packages/pagination/pagination.taro.tsx
index 95418dbefb..dc83a70f3b 100644
--- a/src/packages/pagination/pagination.taro.tsx
+++ b/src/packages/pagination/pagination.taro.tsx
@@ -4,7 +4,7 @@ import { View } from '@tarojs/components'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { usePropsValue } from '@/utils/use-props-value'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/platform-taro'
+import addColorForHarmony from '@/utils/add-color-for-harmony'
 
 export interface PaginationProps extends BasicComponent {
   defaultValue: number
@@ -106,15 +106,6 @@ export const Pagination: FunctionComponent<
     setCurrentPage(curPage)
   }
 
-  function addColorForHarmony(maybeElement: ReactNode, color: string) {
-    if (React.isValidElement(maybeElement) && harmony()) {
-      return React.cloneElement<any>(maybeElement, {
-        color,
-      })
-    }
-    return maybeElement
-  }
-
   return (
     <View className={classNames(classPrefix, className)} style={style}>
       {(mode === 'multi' || mode === 'simple') && (
diff --git a/src/utils/add-color-for-harmony.ts b/src/utils/add-color-for-harmony.ts
new file mode 100644
index 0000000000..cf4b63c611
--- /dev/null
+++ b/src/utils/add-color-for-harmony.ts
@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react'
+import { harmony } from './platform-taro'
+
+function addColorForHarmony(maybeElement: ReactNode, color: string) {
+  if (React.isValidElement(maybeElement) && harmony()) {
+    return React.cloneElement<any>(maybeElement, {
+      color,
+    })
+  }
+  return maybeElement
+}
+
+export default addColorForHarmony