fix: CheckableTag miss CP tag (#44602)

* fix: CheckableTag miss CP tag

* chore: bump tag

* chore: fix failed

* chore: fix circle

.circleci/config.yml

@@ -7,7 +7,9 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.20-browsers
+      - image: cimg/node:18.17-browsers
+    environment:
+      NODE_OPTIONS: --openssl-legacy-provider
     steps:
       - checkout
       - run:

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

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import ConfigProvider from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import Alert from '../../alert';
@@ -942,11 +943,16 @@ describe('ConfigProvider support style and className props', () => {
     const { container } = render(
       <ConfigProvider tag={{ className: 'cp-tag', style: { backgroundColor: 'blue' } }}>
         <Tag>Test</Tag>
+        <Tag.CheckableTag checked>CheckableTag</Tag.CheckableTag>
       </ConfigProvider>,
     );
     const element = container.querySelector<HTMLSpanElement>('.ant-tag');
     expect(element).toHaveClass('cp-tag');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
+
+    const checkableElement = container.querySelector<HTMLSpanElement>('.ant-tag-checkable');
+    expect(checkableElement).toHaveClass('cp-tag');
+    expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' });
   });
 
   it('Should Table className & style works', () => {

components/tag/CheckableTag.tsx

@@ -1,5 +1,6 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
@@ -21,13 +22,14 @@ export interface CheckableTagProps {
 const CheckableTag: React.FC<CheckableTagProps> = (props) => {
   const {
     prefixCls: customizePrefixCls,
+    style,
     className,
     checked,
     onChange,
     onClick,
     ...restProps
   } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, tag } = React.useContext(ConfigContext);
 
   const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
     onChange?.(!checked);
@@ -44,11 +46,22 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
     {
       [`${prefixCls}-checkable-checked`]: checked,
     },
+    tag?.className,
     className,
     hashId,
   );
 
-  return wrapSSR(<span {...restProps} className={cls} onClick={handleClick} />);
+  return wrapSSR(
+    <span
+      {...restProps}
+      style={{
+        ...style,
+        ...tag?.style,
+      }}
+      className={cls}
+      onClick={handleClick}
+    />,
+  );
 };
 
 export default CheckableTag;