feat: config-provider support rangePicker className and style (#45479)

* feat: config-provider support rangePicker className and style properties

* test: add rangepicker className & style test

* chore: change props  verison

* feat：RangePicker className and style properties

---------

Co-authored-by: lijianan <574980606@qq.com>

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

@@ -1045,6 +1045,34 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
   });
 
+  it('Should RangePicker className works', () => {
+    const { RangePicker } = TimePicker;
+    const { container } = render(
+      <ConfigProvider
+        rangePicker={{
+          className: 'test-class',
+        }}
+      >
+        <RangePicker />
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-picker')).toHaveClass('test-class');
+  });
+
+  it('Should RangePicker style works', () => {
+    const { RangePicker } = TimePicker;
+    const { container } = render(
+      <ConfigProvider
+        rangePicker={{
+          style: { color: 'red' },
+        }}
+      >
+        <RangePicker style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should message className & style works', () => {
     const Demo: React.FC = () => {
       const [messageApi, contextHolder] = message.useMessage();

components/config-provider/context.ts

@@ -5,18 +5,18 @@ import type { Options } from 'scroll-into-view-if-needed';
 import type { WarningContextProps } from '../_util/warning';
 import type { ShowWaveEffect } from '../_util/wave/interface';
 import type { BadgeProps } from '../badge';
-import type { ModalProps } from '../modal';
 import type { ButtonProps } from '../button';
+import type { DrawerProps } from '../drawer';
 import type { FlexProps } from '../flex/interface';
 import type { RequiredMark } from '../form/Form';
 import type { InputProps } from '../input';
 import type { Locale } from '../locale';
+import type { ModalProps } from '../modal';
 import type { SpaceProps } from '../space';
 import type { TabsProps } from '../tabs';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
-import type { DrawerProps } from '../drawer';
 
 export const defaultIconPrefixCls = 'anticon';
 
@@ -171,6 +171,7 @@ export interface ConfigConsumerProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
+  rangePicker?: ComponentStyleConfig;
   flex?: FlexConfig;
   wave?: WaveConfig;
   warning?: WarningContextProps;

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

@@ -118,6 +118,7 @@ const {
 | collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | Set datePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rangePicker | Set rangePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |

components/config-provider/index.tsx

@@ -198,6 +198,7 @@ export interface ConfigProviderProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
+  rangePicker?: ComponentStyleConfig;
   flex?: FlexConfig;
   /**
    * Wave is special component which only patch on the effect of component interaction.
@@ -339,6 +340,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    rangePicker,
     flex,
     wave,
     warning: warningConfig,
@@ -430,6 +432,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    rangePicker,
     flex,
     wave,
     warning: warningConfig,

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

@@ -120,6 +120,7 @@ const {
 | collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | datePicker | 设置 DatePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| rangePicker | 设置 RangePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.11.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [DrawerProps\["classNames"\]](/components/drawer-cn#api), styles?: [DrawerProps\["styles"\]](/components/drawer-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -48,6 +48,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       prefixCls: customizePrefixCls,
       getPopupContainer: customGetPopupContainer,
       className,
+      style,
       placement,
       size: customizeSize,
       disabled: customDisabled,
@@ -63,7 +64,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     } = props;
 
     const innerRef = React.useRef<RCRangePicker<DateType>>(null);
-    const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
+    const { getPrefixCls, direction, getPopupContainer, rangePicker } = useContext(ConfigContext);
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
     const { format, showTime, picker } = props as any;
@@ -138,8 +139,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           hashId,
           compactItemClassnames,
           className,
+          rangePicker?.className,
           rootClassName,
         )}
+        style={{ ...rangePicker?.style, ...style }}
         locale={locale.lang}
         prefixCls={prefixCls}
         getPopupContainer={customGetPopupContainer || getPopupContainer}