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( + + + , + ); + + expect(container.querySelector('.ant-skeleton')).toHaveClass('test-class'); + }); + + it('Should Skeleton style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-skeleton')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Spin className & style works', () => { const { container } = render( = (props) => { checkbox, descriptions, divider, + skeleton, steps, image, layout, @@ -351,6 +353,7 @@ const ProviderChildren: React.FC = (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 & 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 & CompoundedComponent = (props) => { [`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-round`]: round, }, + skeleton?.className, className, rootClassName, hashId, ); return wrapSSR( - + {avatarNode} {contentNode} ,