diff --git a/src/packages/pagination/pagination.taro.tsx b/src/packages/pagination/pagination.taro.tsx index fa06c5b938..dc83a70f3b 100644 --- a/src/packages/pagination/pagination.taro.tsx +++ b/src/packages/pagination/pagination.taro.tsx @@ -1,9 +1,10 @@ -import React, { FunctionComponent, useMemo, ReactNode } from 'react' +import React, { FunctionComponent, ReactNode, useMemo } from 'react' import classNames from 'classnames' 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 addColorForHarmony from '@/utils/add-color-for-harmony' export interface PaginationProps extends BasicComponent { defaultValue: number @@ -117,7 +118,10 @@ export const Pagination: FunctionComponent< )} onClick={(e) => handleSelectPage(currentPage - 1)} > - {prev || locale.pagination.prev} + {addColorForHarmony( + prev || locale.pagination.prev, + currentPage === 1 ? '#c2c4cc' : '#ff0f23' + )} {mode === 'multi' && ( @@ -154,7 +158,10 @@ export const Pagination: FunctionComponent< )} onClick={(e) => handleSelectPage(currentPage + 1)} > - {next || locale.pagination.next} + {addColorForHarmony( + next || locale.pagination.next, + currentPage >= pageCount ? '#c2c4cc' : '#ff0f23' + )} )} diff --git a/src/utils/add-color-for-harmony.ts b/src/utils/add-color-for-harmony.ts new file mode 100644 index 0000000000..471f7b3f80 --- /dev/null +++ b/src/utils/add-color-for-harmony.ts @@ -0,0 +1,23 @@ +import React, { ReactElement, ReactNode } from 'react' +import { harmony } from './platform-taro' + +interface ColorProps { + color?: string +} + +/** + * 为支持 Harmony 的 React 元素添加颜色属性 + * @param maybeElement - 要处理的 React 节点 + * @param color - 要添加的颜色值(如:'#ff0000') + * @returns 处理后的 React 节点 + */ +function addColorForHarmony(maybeElement: ReactNode, color: string) { + if (React.isValidElement(maybeElement) && harmony()) { + return React.cloneElement(maybeElement as ReactElement, { + color, + }) + } + return maybeElement +} + +export default addColorForHarmony