feat: config-provider support skeleton className and style properties (#43062)

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

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;

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 |

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,

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 |

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>,