feat: ConfigProvider support Statistic className and style properties (#43408)

components/config-provider/__tests__/style.test.tsx

@@ -37,6 +37,7 @@ import Skeleton from '../../skeleton';
 import Slider from '../../slider';
 import Space from '../../space';
 import Spin from '../../spin';
+import Statistic from '../../statistic';
 import Steps from '../../steps';
 import Switch from '../../switch';
 import Table from '../../table';
@@ -325,6 +326,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Statistic className works', () => {
+    const { container } = render(
+      <ConfigProvider
+        statistic={{
+          className: 'test-class',
+        }}
+      >
+        <Statistic title="Test Title" value={100} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-statistic')).toHaveClass('test-class');
+  });
+
+  it('Should Statistic style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        statistic={{
+          style: { color: 'red' },
+        }}
+      >
+        <Statistic style={{ fontSize: '16px' }} title="Test Title" value={100} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-statistic')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Segmented className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -107,6 +107,7 @@ export interface ConfigConsumerProps {
   spin?: ComponentStyleConfig;
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
+  statistic?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   layout?: ComponentStyleConfig;
   list?: ComponentStyleConfig;

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

@@ -139,6 +139,7 @@ const {
 | switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -150,6 +150,7 @@ export interface ConfigProviderProps {
   skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
   segmented?: ComponentStyleConfig;
+  statistic?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   layout?: ComponentStyleConfig;
@@ -272,6 +273,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     theme,
     componentDisabled,
     segmented,
+    statistic,
     spin,
     calendar,
     cascader,
@@ -366,6 +368,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     iconPrefixCls,
     theme: mergedTheme,
     segmented,
+    statistic,
     spin,
     calendar,
     cascader,

components/config-provider/index.zh-CN.md

@@ -141,6 +141,7 @@ const {
 | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/statistic/Statistic.tsx

@@ -42,7 +42,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     groupSeparator = ',',
   } = props;
 
-  const { getPrefixCls, direction } = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const { getPrefixCls, direction, statistic } =
+    React.useContext<ConfigConsumerProps>(ConfigContext);
 
   const prefixCls = getPrefixCls('statistic', customizePrefixCls);
 
@@ -63,13 +64,19 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
+    statistic?.className,
     className,
     rootClassName,
     hashId,
   );
 
   return wrapSSR(
-    <div className={cls} style={style} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <div
+      className={cls}
+      style={{ ...statistic?.style, ...style }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
       {title && <div className={`${prefixCls}-title`}>{title}</div>}
       <Skeleton paragraph={false} loading={loading} className={`${prefixCls}-skeleton`}>
         <div style={valueStyle} className={`${prefixCls}-content`}>