feat: support classnames and styles (#641)

Author: thinkasany

src/Pager.tsx

@@ -8,6 +8,7 @@ export interface PagerProps extends Pick<PaginationProps, 'itemRender'> {
   page: number;
   active?: boolean;
   className?: string;
+  style?: React.CSSProperties;
   showTitle: boolean;
   onClick?: (page: number) => void;
   onKeyPress?: (
@@ -23,6 +24,7 @@ const Pager: React.FC<PagerProps> = (props) => {
     page,
     active,
     className,
+    style,
     showTitle,
     onClick,
     onKeyPress,
@@ -54,6 +56,7 @@ const Pager: React.FC<PagerProps> = (props) => {
     <li
       title={showTitle ? String(page) : null}
       className={cls}
+      style={style}
       onClick={handleClick}
       onKeyDown={handleKeyPress}
       tabIndex={0}

src/Pagination.tsx

@@ -36,6 +36,8 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     prefixCls = 'rc-pagination',
     selectPrefixCls = 'rc-select',
     className,
+    classNames: paginationClassNames,
+    styles,
 
     // control
     current: currentProp,
@@ -332,6 +334,8 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showTitle,
     itemRender,
     page: -1,
+    className: paginationClassNames?.item,
+    style: styles?.item,
   };
 
   const prevPage = current - 1 > 0 ? current - 1 : 0;

src/interface.ts

@@ -18,7 +18,11 @@ export interface PaginationLocale {
   page_size?: string;
 }
 
+type SemanticName = 'item';
+
 export interface PaginationData {
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
   className: string;
   selectPrefixCls: string;
   prefixCls: string;

tests/index.test.tsx

@@ -241,6 +241,19 @@ describe('Controlled Pagination', () => {
 });
 
 describe('Other props', () => {
+  it('support classnames and styles', () => {
+    const { container } = render(
+      <Pagination
+        total={1000}
+        current={12}
+        classNames={{ item: 'custom-test' }}
+        styles={{ item: { color: 'red' } }}
+      />,
+    );
+    const item = container.querySelector('.rc-pagination-item');
+    expect(item).toHaveClass('custom-test');
+    expect(item).toHaveStyle('color: red');
+  });
   it('should support custom default icon', () => {
     const nextIcon = () => <span>nextIcon</span>;
     const prevIcon = () => <span>prevIcon</span>;