From f1f5fe3846f4eb1acc0fba7090cac7acd4cbc901 Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Wed, 5 Jul 2023 18:00:46 +0800
Subject: [PATCH] feat: config-provider support skeleton className and style
 properties (#43062)

---
 .../config-provider/__tests__/style.test.tsx  | 29 +++++++++++++++++++
 components/config-provider/context.ts         |  1 +
 components/config-provider/index.en-US.md     |  1 +
 components/config-provider/index.tsx          |  3 ++
 components/config-provider/index.zh-CN.md     |  1 +
 components/skeleton/Skeleton.tsx              |  7 +++--
 6 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index d729ea0718..2de3eb127f 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -24,6 +24,7 @@ import Pagination from '../../pagination';
 import Radio from '../../radio';
 import Rate from '../../rate';
 import Result from '../../result';
+import Skeleton from '../../skeleton';
 import Segmented from '../../segmented';
 import Select from '../../select';
 import Slider from '../../slider';
@@ -202,6 +203,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Skeleton className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        skeleton={{
+          className: 'test-class',
+        }}
+      >
+        <Skeleton />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-skeleton')).toHaveClass('test-class');
+  });
+
+  it('Should Skeleton style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        skeleton={{
+          style: { color: 'red' },
+        }}
+      >
+        <Skeleton style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-skeleton')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Spin className & style works', () => {
     const { container } = render(
       <ConfigProvider
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 15ea1c9e93..79fd993704 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -99,6 +99,7 @@ export interface ConfigConsumerProps {
   divider?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
+  skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 00bee95afa..55d81dc4ec 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -125,6 +125,7 @@ const {
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| skeleton | Set Skeleton common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
 | slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index d63ecd1c50..f48fcedff9 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -143,6 +143,7 @@ export interface ConfigProviderProps {
   cascader?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
+  skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
@@ -267,6 +268,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     checkbox,
     descriptions,
     divider,
+    skeleton,
     steps,
     image,
     layout,
@@ -351,6 +353,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     checkbox,
     descriptions,
     divider,
+    skeleton,
     steps,
     image,
     input,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 5726f88550..807e9d4762 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -127,6 +127,7 @@ const {
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
 | slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx
index d799d39374..ae1ee0f4c2 100644
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@@ -4,10 +4,10 @@ import { ConfigContext } from '../config-provider';
 import type { AvatarProps } from './Avatar';
 import SkeletonAvatar from './Avatar';
 import SkeletonButton from './Button';
-import SkeletonNode from './Node';
 import Element from './Element';
 import SkeletonImage from './Image';
 import SkeletonInput from './Input';
+import SkeletonNode from './Node';
 import type { SkeletonParagraphProps } from './Paragraph';
 import Paragraph from './Paragraph';
 import type { SkeletonTitleProps } from './Title';
@@ -101,7 +101,7 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
     round,
   } = props;
 
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, skeleton } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -168,13 +168,14 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
         [`${prefixCls}-rtl`]: direction === 'rtl',
         [`${prefixCls}-round`]: round,
       },
+      skeleton?.className,
       className,
       rootClassName,
       hashId,
     );
 
     return wrapSSR(
-      <div className={cls} style={style}>
+      <div className={cls} style={{ ...skeleton?.style, ...style }}>
         {avatarNode}
         {contentNode}
       </div>,