feat: CP support Tag className and style (#43294)

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

@@ -26,6 +26,7 @@ import Space from '../../space';
 import Spin from '../../spin';
 import Steps from '../../steps';
 import Switch from '../../switch';
+import Tag from '../../tag';
 import Typography from '../../typography';
 
 describe('ConfigProvider support style and className props', () => {
@@ -605,4 +606,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-switch');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Tag className & style works', () => {
+    const { container } = render(
+      <ConfigProvider tag={{ className: 'cp-tag', style: { backgroundColor: 'blue' } }}>
+        <Tag>Test</Tag>
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLSpanElement>('.ant-tag');
+    expect(element).toHaveClass('cp-tag');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -116,6 +116,7 @@ export interface ConfigConsumerProps {
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
+  tag?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -127,6 +127,7 @@ const {
 | 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 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/config-provider/index.tsx

@@ -160,6 +160,7 @@ export interface ConfigProviderProps {
   radio?: ComponentStyleConfig;
   rate?: ComponentStyleConfig;
   switch?: ComponentStyleConfig;
+  tag?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -272,6 +273,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     radio,
     rate,
     switch: SWITCH,
+    tag,
   } = props;
 
   // =================================== Warning ===================================
@@ -346,6 +348,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     radio,
     rate,
     switch: SWITCH,
+    tag,
   };
 
   const config = {

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

@@ -129,6 +129,7 @@ const {
 | 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 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 
 ## FAQ

components/tag/index.tsx

@@ -49,7 +49,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     bordered = true,
     ...props
   } = tagProps;
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, tag } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
   // Warning for deprecated usage
@@ -71,6 +71,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
 
   const tagStyle: React.CSSProperties = {
     backgroundColor: color && !isInternalColor ? color : undefined,
+    ...tag?.style,
     ...style,
   };
 
@@ -80,6 +81,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
 
   const tagClassName = classNames(
     prefixCls,
+    tag?.className,
     {
       [`${prefixCls}-${color}`]: isInternalColor,
       [`${prefixCls}-has-color`]: color && !isInternalColor,