diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 3c13844578..8c33108e69 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -152,7 +152,8 @@ const AnchorContent: React.FC = (props) => { const spanLinkNode = React.useRef(null); const animating = React.useRef(false); - const { direction, getTargetContainer } = React.useContext(ConfigContext); + const { direction, getTargetContainer, anchor } = + React.useContext(ConfigContext); const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer; @@ -280,6 +281,7 @@ const AnchorContent: React.FC = (props) => { [`${prefixCls}-rtl`]: direction === 'rtl', }, className, + anchor?.className, ); const anchorClass = classNames(prefixCls, { @@ -292,6 +294,7 @@ const AnchorContent: React.FC = (props) => { const wrapperStyle: React.CSSProperties = { maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh', + ...anchor?.style, ...style, }; diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index af405b9a33..3f1813faf6 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ConfigProvider from '..'; import { render } from '../../../tests/utils'; +import Anchor from '../../anchor'; import Breadcrumb from '../../breadcrumb'; import Checkbox from '../../checkbox'; import Descriptions from '../../descriptions'; @@ -208,6 +209,37 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should Anchor className & style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-anchor-wrapper')).toHaveClass('cp-className'); + expect(container.querySelector('.ant-anchor-wrapper')).toHaveStyle({ background: 'red' }); + }); + it('Should Breadcrumb className & style works', () => { const { container } = render( = (props) => { children, csp: customCsp, autoInsertSpaceInButton, + anchor, form, locale, componentSize, @@ -287,6 +289,7 @@ const ProviderChildren: React.FC = (props) => { const baseConfig = { csp, autoInsertSpaceInButton, + anchor, locale: locale || legacyLocale, direction, space, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index cb7e8b1473..cdc6d2849f 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -103,6 +103,7 @@ const { | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 | | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |