diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 0c0408a26d..622a9ed40d 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -13,6 +13,7 @@ import Cascader from '../../cascader'; import Checkbox from '../../checkbox'; import Collapse from '../../collapse'; import ColorPicker from '../../color-picker'; +import DatePicker from '../../date-picker'; import Descriptions from '../../descriptions'; import Divider from '../../divider'; import Drawer from '../../drawer'; @@ -44,6 +45,7 @@ import Switch from '../../switch'; import Table from '../../table'; import Tabs from '../../tabs'; import Tag from '../../tag'; +import TimePicker from '../../time-picker'; import Timeline from '../../timeline'; import Transfer from '../../transfer'; import Tree from '../../tree'; @@ -1010,6 +1012,34 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should TimePicker className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-picker')).toHaveClass('test-class'); + }); + + it('Should TimePicker style works', () => { + const { container } = render( + + + , + ); + + 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(); @@ -1205,4 +1235,32 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveClass('cp-colorPicker'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + + it('Should DatePicker className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-picker')).toHaveClass('test-class'); + }); + + it('Should DatePicker style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;'); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 5717b45a3b..b13611610d 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -136,10 +136,12 @@ export interface ConfigConsumerProps { card?: ComponentStyleConfig; tabs?: ComponentStyleConfig; timeline?: ComponentStyleConfig; + timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; colorPicker?: ComponentStyleConfig; + datePicker?: ComponentStyleConfig; } const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 52e95f9c71..09e0f9dfc5 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -114,6 +114,7 @@ const { | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | 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 | | 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 } | - | 5.7.0 | @@ -146,6 +147,7 @@ const { | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | Set Typography 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 ec1a0eebde..56c5602670 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -178,10 +178,12 @@ export interface ConfigProviderProps { card?: ComponentStyleConfig; tabs?: ComponentStyleConfig; timeline?: ComponentStyleConfig; + timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; colorPicker?: ComponentStyleConfig; + datePicker?: ComponentStyleConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -312,10 +314,12 @@ const ProviderChildren: React.FC = (props) => { card, tabs, timeline, + timePicker, upload, notification, tree, colorPicker, + datePicker, } = props; // =================================== Warning =================================== @@ -408,10 +412,12 @@ const ProviderChildren: React.FC = (props) => { card, tabs, timeline, + timePicker, upload, notification, tree, colorPicker, + datePicker, }; const config = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index d8c7f0cbe3..9bb937e72a 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -116,6 +116,7 @@ const { | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | 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 | | 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 } | - | 5.7.0 | @@ -148,6 +149,7 @@ const { | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index a886b58fc2..205d5b829e 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -37,11 +37,13 @@ export default function generatePicker(generateConfig: GenerateConfig< picker?: PickerMode, displayName?: string, ) { + const consumerName = displayName === 'TimePicker' ? 'timePicker' : 'datePicker'; const Picker = forwardRef | CommonPickerMethods, InnerPickerProps>( (props, ref) => { const { prefixCls: customizePrefixCls, getPopupContainer: customizeGetPopupContainer, + style, className, rootClassName, size: customizeSize, @@ -55,7 +57,14 @@ export default function generatePicker(generateConfig: GenerateConfig< ...restProps } = props; - const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext); + const { + getPrefixCls, + direction, + getPopupContainer, + // Consume different styles according to different names + [consumerName]: consumerStyle, + } = useContext(ConfigContext); + const prefixCls = getPrefixCls('picker', customizePrefixCls); const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction); const innerRef = React.useRef>(null); @@ -153,9 +162,11 @@ export default function generatePicker(generateConfig: GenerateConfig< ), hashId, compactItemClassnames, + consumerStyle?.className, className, rootClassName, )} + style={{ ...consumerStyle?.style, ...style }} prefixCls={prefixCls} getPopupContainer={customizeGetPopupContainer || getPopupContainer} generateConfig={generateConfig}