diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 586d6ea852..679b1089f0 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/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( + + + , + ); + const element = container.querySelector('.ant-tabs'); + expect(element).toHaveClass('cp-tabs'); + expect(element).toHaveStyle({ backgroundColor: 'red' }); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index aa6dc784f7..7cf60bb079 100644 --- a/components/config-provider/context.ts +++ b/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) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index f6bd453ac6..2ea4d8fb4c 100644 --- a/components/config-provider/index.en-US.md +++ b/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 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 0b0507fb55..8e6d7247a9 100644 --- a/components/config-provider/index.tsx +++ b/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 = (props) => { tag, table, card, + tabs, } = props; // =================================== Warning =================================== @@ -358,6 +360,7 @@ const ProviderChildren: React.FC = (props) => { tag, table, card, + tabs, }; const config = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 935a05f33a..589709781a 100644 --- a/components/config-provider/index.zh-CN.md +++ b/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 | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index fe80f23189..78b59c8497 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -31,23 +31,25 @@ export interface TabsProps extends Omit { children?: React.ReactNode; } -function Tabs({ - type, - className, - rootClassName, - size: customSize, - onEdit, - hideAdd, - centered, - addIcon, - popupClassName, - children, - items, - animated, - ...props -}: TabsProps) { - const { prefixCls: customizePrefixCls, moreIcon = } = props; - const { direction, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext); +const Tabs: React.FC & { 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 = } = 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( , ); -} +}; Tabs.TabPane = TabPane;