feat: config-provider support descriptions className and style properties (#43189)

components/anchor/Anchor.tsx

@@ -152,7 +152,8 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
   const spanLinkNode = React.useRef<HTMLSpanElement>(null);
   const animating = React.useRef<boolean>(false);
 
-  const { direction, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const { direction, getTargetContainer, anchor } =
+    React.useContext<ConfigConsumerProps>(ConfigContext);
 
   const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
 
@@ -280,6 +281,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    anchor?.className,
   );
 
   const anchorClass = classNames(prefixCls, {
@@ -292,6 +294,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
 
   const wrapperStyle: React.CSSProperties = {
     maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
+    ...anchor?.style,
     ...style,
   };
 

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(
+      <ConfigProvider
+        anchor={{
+          className: 'cp-className',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Anchor
+          items={[
+            {
+              key: 'part-1',
+              href: '#part-1',
+              title: 'Part 1',
+            },
+            {
+              key: 'part-2',
+              href: '#part-2',
+              title: 'Part 2',
+            },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+
+    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(
       <ConfigProvider

components/config-provider/context.ts

@@ -85,6 +85,7 @@ export interface ConfigConsumerProps {
   select?: {
     showSearch?: boolean;
   };
+  anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -101,6 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -134,6 +134,7 @@ export interface ConfigProviderProps {
   popupMatchSelectWidth?: boolean;
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
+  anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
@@ -219,6 +220,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     children,
     csp: customCsp,
     autoInsertSpaceInButton,
+    anchor,
     form,
     locale,
     componentSize,
@@ -287,6 +289,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const baseConfig = {
     csp,
     autoInsertSpaceInButton,
+    anchor,
     locale: locale || legacyLocale,
     direction,
     space,

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 |