diff --git a/src/PageItem.tsx b/src/PageItem.tsx index 6a35b18360..95f0b72559 100644 --- a/src/PageItem.tsx +++ b/src/PageItem.tsx @@ -13,6 +13,8 @@ export interface PageItemProps active?: boolean; activeLabel?: string; href?: string; + linkStyle?: React.CSSProperties; + linkClassName?: string; } const propTypes = { @@ -30,6 +32,12 @@ const propTypes = { /** A callback function for when this component is clicked. */ onClick: PropTypes.func, + + /** custom style for the inner component of the PageItem */ + linkStyle: PropTypes.object, + + /** custom className for the inner component of the PageItem */ + linkClassName: PropTypes.string, }; const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> = @@ -42,6 +50,8 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> = style, activeLabel = '(current)', children, + linkStyle, + linkClassName, ...props }: PageItemProps, ref, @@ -53,7 +63,11 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> = style={style} className={classNames(className, 'page-item', { active, disabled })} > - + {children} {active && activeLabel && ( {activeLabel} diff --git a/test/PageItemSpec.tsx b/test/PageItemSpec.tsx index 4a651f81a0..cd4a3030ae 100644 --- a/test/PageItemSpec.tsx +++ b/test/PageItemSpec.tsx @@ -49,5 +49,23 @@ describe('', () => { pageItemInnerElem.classList.contains('page-link').should.be.true; }); + + it('should apply className to the inner component if linkClassName is set', () => { + const { container } = render( + , + ); + const pageItemElem = container.firstElementChild!; + const pageItemInnerElem = pageItemElem.firstElementChild!; + + pageItemInnerElem.classList.contains('custom-class-name').should.be.true; + }); + + it('should apply style to the inner component if linkStyle is set', () => { + const { container } = render(); + const pageItemElem = container.firstElementChild!; + const pageItemInnerElem = pageItemElem.firstElementChild!; + + pageItemInnerElem.getAttribute('style')!.should.equal('color: red;'); + }); }); });