feat: CP support Tabs className and style (#43319)

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

@@ -29,6 +29,7 @@ import Spin from '../../spin';
 import Steps from '../../steps';
 import Switch from '../../switch';
 import Table from '../../table';
+import Tabs from '../../tabs';
 import Tag from '../../tag';
 import Typography from '../../typography';
 
@@ -653,4 +654,15 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveClass('cp-card');
     expect(element).toHaveStyle({ backgroundColor: 'blue' });
   });
+
+  it('Should Tabs className & style works', () => {
+    const { container } = render(
+      <ConfigProvider tabs={{ className: 'cp-tabs', style: { backgroundColor: 'red' } }}>
+        <Tabs />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-tabs');
+    expect(element).toHaveClass('cp-tabs');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -120,6 +120,7 @@ export interface ConfigConsumerProps {
   tag?: ComponentStyleConfig;
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
+  tabs?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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

@@ -130,6 +130,7 @@ const {
 | 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 |
 | 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 |
 | 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 |
 

components/config-provider/index.tsx

@@ -164,6 +164,7 @@ export interface ConfigProviderProps {
   tag?: ComponentStyleConfig;
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
+  tabs?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -280,6 +281,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tag,
     table,
     card,
+    tabs,
   } = props;
 
   // =================================== Warning ===================================
@@ -358,6 +360,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tag,
     table,
     card,
+    tabs,
   };
 
   const config = {

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

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

components/tabs/index.tsx

@@ -31,23 +31,25 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   children?: React.ReactNode;
 }
 
-function Tabs({
-  type,
-  className,
-  rootClassName,
-  size: customSize,
-  onEdit,
-  hideAdd,
-  centered,
-  addIcon,
-  popupClassName,
-  children,
-  items,
-  animated,
-  ...props
-}: TabsProps) {
-  const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
-  const { direction, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
+const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
+  const {
+    type,
+    className,
+    rootClassName,
+    size: customSize,
+    onEdit,
+    hideAdd,
+    centered,
+    addIcon,
+    popupClassName,
+    children,
+    items,
+    animated,
+    style,
+    ...otherProps
+  } = props;
+  const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = otherProps;
+  const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tabs', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -76,32 +78,36 @@ function Tabs({
 
   const size = useSize(customSize);
 
+  const mergedStyle: React.CSSProperties = { ...tabs?.style, ...style };
+
   return wrapSSR(
     <RcTabs
       direction={direction}
       getPopupContainer={getPopupContainer}
       moreTransitionName={`${rootPrefixCls}-slide-up`}
-      {...props}
+      {...otherProps}
       items={mergedItems}
       className={classNames(
         {
           [`${prefixCls}-${size}`]: size,
-          [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type as string),
+          [`${prefixCls}-card`]: ['card', 'editable-card'].includes(type!),
           [`${prefixCls}-editable-card`]: type === 'editable-card',
           [`${prefixCls}-centered`]: centered,
         },
+        tabs?.className,
         className,
         rootClassName,
         hashId,
       )}
       popupClassName={classNames(popupClassName, hashId)}
+      style={mergedStyle}
       editable={editable}
       moreIcon={moreIcon}
       prefixCls={prefixCls}
       animated={mergedAnimated}
     />,
   );
-}
+};
 
 Tabs.TabPane = TabPane;